`

addEventListener方法

阅读更多
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方法的使用

    在本文中,我们将深入探讨`addEventListener`方法的使用,这对于创建响应式的Web应用至关重要。 `addEventListener`是DOM(文档对象模型)级别2事件处理程序的一部分,它允许我们为一个元素添加一个或多个事件...

    attachEvent和addEventListener 使用方法

    在JavaScript中,`attachEvent` 和 `addEventListener` 是两种用于为元素添加事件处理程序的方法,主要在Internet Explorer和非IE浏览器(遵循W3C标准)中使用。它们都是用来监听和响应用户或浏览器的特定行为,如...

    javascript attachEvent和addEventListener使用方法

    本知识点将介绍 JavaScript 中两种常用的方法:attachEvent 和 addEventListener,以及它们在不同浏览器中的应用和区别。 首先,attachEvent 方法是早期 Internet Explorer 浏览器引入的事件监听方法,它的语法是:...

    IE11没有window.attachEvent方法处理方法

    // 使用addEventListener方法 window.addEventListener('load', function() { console.log('页面加载完成'); }, false); ``` 如果需要保持与旧版本IE的兼容性,可以使用条件语句来判断当前浏览器类型,并选择合适...

    js点击图片预览及遮罩关闭.html

    通过 addEventListener 方法将 showPreview 函数绑定到每个需要预览的图片上,将 hidePreview 函数绑定到预览框中的关闭按钮上。 (可选)通过 addEventListener 方法将匿名函数绑定到窗口的 click 事件上,当用户...

    [转]事件总线,解决各种和addEventListener有关的麻烦

    在传统的事件处理中,我们通常使用addEventListener方法来注册事件监听器,然后在特定事件触发时执行相应的回调函数。这种方式在小规模项目中或许可行,但在大型复杂应用中,随着组件数量的增长,事件的管理和维护变...

    2.01 JavaScript基础事件以及Event对象(原生态).pdf

    本文将详细介绍 JavaScript 中的基础事件和 Event 对象,包括事件的定义、EventTarget 接收事件接口、addEventListener、removeEventListener、dispatchEvent 方法 serta JavaScript 中常用的事件等。 事件的定义 -...

    js监听输入框值的即时变化onpropertychange、oninput.docx

    了解了如何使用oninput 事件和addEventListener 方法来监听输入框值的即时变化后,我们可以使用以下代码来实现: ```html ``` ```javascript var textfield = document.getElementById("textfield"); textfield....

    event对象总结,更详细更全面

    addEventListener方法是W3C标准,它可以在Mozilla系列浏览器中使用,而attachEvent方法则是IE浏览器专用的方法。 事件对象的属性 事件对象拥有一些重要的属性,例如: * target:事件的目标元素 * srcElement:...

    大华二次开发使用 WEB32网页调用接口说明V2.0

    在AddEventListener方法中,需要指定要监听的事件类型和处理函数。当事件发生时,处理函数将被调用,以便进行相应的处理。 二、登陆/登出 在使用WEB32控件进行二次开发时,需要进行登陆和登出操作。该操作可以使用...

    【APICloud开发】利用百度地图显示周边商家、景区、团购等

    解决这些问题的方案是,使用APICloud提供的API和方法,例如addEventListener方法、openWin方法、addEventList方法等,并根据百度地图API的文档,获取周边信息和显示周边信息。 十一、结论 利用APICloud开发可以...

    前端大厂最新面试题-event_Model.docx

    addEventListener 方法用于绑定事件监听函数,参数包括 eventType、handler 和 useCapture。eventType 指定事件类型,handler 是事件处理函数,useCapture 是一个布尔值,用于指定是否在捕获阶段进行处理。 ...

    websocket思维导图

    也可以是多个回调函数,使用 addEventListener 方法: ws.addEventListener('open', function(event) { ws.send('Hello server!'); }); onclose onclose 用于指定连接关闭后的回调函数,可以是单个回调函数: ...

    javascript 跨浏览器的事件系统

    另一方面,文章也提到了IE浏览器中的attachEvent方法,并且指出了其与addEventListener方法的主要差异。在IE中,回调函数的this指向可能与标准不一致,且事件对象并非作为回调函数的第一个参数自动传递。这导致在IE...

    火狐浏览器不支持window.event的解决办法

    火狐浏览器不支持window.event的解决办法,解决不同浏览器针对window.event的差异

    easyui+增强窗体 demo_ext为实例文件

    1、menu、datagrid、combo、combobox、panel、tabs、tree、treegrid 增加 addEventListener 方法。 2、修复menu、datagrid、combo、combobox、panel、tabs、tree、treegrid 因事件注册造成多次重复渲染的问题(包括...

    JAVASCRIPT函数之高阶函数.pdf

    addEventListener方法接受两个参数:一个是事件类型,另一个是当事件发生时要调用的回调函数。 最后,文档还隐含地展示了JavaScript中函数的灵活用法,比如函数可以作为对象存在,对象的属性可以是函数等。这种用法...

Global site tag (gtag.js) - Google Analytics