1.时间流分为三个阶段:由根往目标的捕获阶段、目标阶段、由目标到根的冒泡阶段。
2.addEventListener(type, listener, boolean)
捕获阶段:boolean是true并注册了事件的元素
目标阶段:目标元素
冒泡阶段:boolean是false并注册了事件的元素
<div id="outDiv">
<div id="middleDiv">
<div id="inDiv"></div>
</div>
</div>
</div>
<script>
var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");
outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, flag);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, flag);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, flag);
</script>
全为 false 时,触发顺序为:inDiv、middleDiv、outDiv;
全为 true 时,触发顺序为:outDiv、middleDiv、inDiv;
outDiv 为 true,其他为 false 时,触发顺序为:outDiv、inDiv、middleDiv;
middleDiv 为 true,其他为 false 时,触发顺序为:middleDiv、inDiv、outDiv;
inDiv 为 true,其他为 false 时,触发顺序为:inDiv、middleDiv、outDiv;
outDiv为 false,其他为 true时,触发顺序为:middleDiv、inDiv、outDiv;
middleDiv为 false,其他为 true时,触发顺序为:outDiv、inDiv、middleDiv;
inDiv为 false,其他为 true时,触发顺序为:outDiv、middleDiv、inDiv.
分享到:
相关推荐
在本文中,我们将深入探讨`addEventListener`方法的使用,这对于创建响应式的Web应用至关重要。 `addEventListener`是DOM(文档对象模型)级别2事件处理程序的一部分,它允许我们为一个元素添加一个或多个事件...
在JavaScript中,`attachEvent` 和 `addEventListener` 是两种用于为元素添加事件处理程序的方法,主要在Internet Explorer和非IE浏览器(遵循W3C标准)中使用。它们都是用来监听和响应用户或浏览器的特定行为,如...
本知识点将介绍 JavaScript 中两种常用的方法:attachEvent 和 addEventListener,以及它们在不同浏览器中的应用和区别。 首先,attachEvent 方法是早期 Internet Explorer 浏览器引入的事件监听方法,它的语法是:...
// 使用addEventListener方法 window.addEventListener('load', function() { console.log('页面加载完成'); }, false); ``` 如果需要保持与旧版本IE的兼容性,可以使用条件语句来判断当前浏览器类型,并选择合适...
通过 addEventListener 方法将 showPreview 函数绑定到每个需要预览的图片上,将 hidePreview 函数绑定到预览框中的关闭按钮上。 (可选)通过 addEventListener 方法将匿名函数绑定到窗口的 click 事件上,当用户...
在传统的事件处理中,我们通常使用addEventListener方法来注册事件监听器,然后在特定事件触发时执行相应的回调函数。这种方式在小规模项目中或许可行,但在大型复杂应用中,随着组件数量的增长,事件的管理和维护变...
本文将详细介绍 JavaScript 中的基础事件和 Event 对象,包括事件的定义、EventTarget 接收事件接口、addEventListener、removeEventListener、dispatchEvent 方法 serta JavaScript 中常用的事件等。 事件的定义 -...
了解了如何使用oninput 事件和addEventListener 方法来监听输入框值的即时变化后,我们可以使用以下代码来实现: ```html ``` ```javascript var textfield = document.getElementById("textfield"); textfield....
addEventListener方法是W3C标准,它可以在Mozilla系列浏览器中使用,而attachEvent方法则是IE浏览器专用的方法。 事件对象的属性 事件对象拥有一些重要的属性,例如: * target:事件的目标元素 * srcElement:...
在AddEventListener方法中,需要指定要监听的事件类型和处理函数。当事件发生时,处理函数将被调用,以便进行相应的处理。 二、登陆/登出 在使用WEB32控件进行二次开发时,需要进行登陆和登出操作。该操作可以使用...
解决这些问题的方案是,使用APICloud提供的API和方法,例如addEventListener方法、openWin方法、addEventList方法等,并根据百度地图API的文档,获取周边信息和显示周边信息。 十一、结论 利用APICloud开发可以...
addEventListener 方法用于绑定事件监听函数,参数包括 eventType、handler 和 useCapture。eventType 指定事件类型,handler 是事件处理函数,useCapture 是一个布尔值,用于指定是否在捕获阶段进行处理。 ...
也可以是多个回调函数,使用 addEventListener 方法: ws.addEventListener('open', function(event) { ws.send('Hello server!'); }); onclose onclose 用于指定连接关闭后的回调函数,可以是单个回调函数: ...
1、menu、datagrid、combo、combobox、panel、tabs、tree、treegrid 增加 addEventListener 方法。 2、修复menu、datagrid、combo、combobox、panel、tabs、tree、treegrid 因事件注册造成多次重复渲染的问题(包括...
另一方面,文章也提到了IE浏览器中的attachEvent方法,并且指出了其与addEventListener方法的主要差异。在IE中,回调函数的this指向可能与标准不一致,且事件对象并非作为回调函数的第一个参数自动传递。这导致在IE...
火狐浏览器不支持window.event的解决办法,解决不同浏览器针对window.event的差异
addEventListener方法接受两个参数:一个是事件类型,另一个是当事件发生时要调用的回调函数。 最后,文档还隐含地展示了JavaScript中函数的灵活用法,比如函数可以作为对象存在,对象的属性可以是函数等。这种用法...