`
123003473
  • 浏览: 1059643 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

js中addEventListener中第3个参数 .

 
阅读更多
捕获阶段、目标阶段、冒泡阶段
addEventListener中的第三个参 数是useCapture, 一个bool类型。当为false时为冒泡获取(由里向外),true为capture方式(由外向里)。
<div id="id1" style=" background-color:blue;">
   id1<br />
   <div id="id2" style="background-color:green;">div2</div>
</div>


eg1:
01.document.getElementById('id1').addEventListener('click', function() { console.log('id1');}, false);  
02.  
03.document.getElementById('id2').addEventListener('click', function() { console.log('id2');}, false);  

点击id2的div结果是: id2, id1

eg2:
01.document.getElementById('id1').addEventListener('click', function() { console.log('id1');}, false);  
02.  
03.document.getElementById('id2').addEventListener('click', function() { console.log('id2');}, true);

结果是: id2, id1

eg3:
01.document.getElementById('id1').addEventListener('click', function() { console.log('id1');}, true);  
02.  
03.document.getElementById('id2').addEventListener('click', function() { console.log('id2');}, false); 

结果是:id1,id2

eg4:
01.document.getElementById('id1').addEventListener('click', function() { console.log('id1');}, true);  
02.  
03.document.getElementById('id2').addEventListener('click', function() { console.log('id2');}, true); 

结果是:id1,id2

【转载地址】http://blog.csdn.net/jijun7885417/article/details/7870348
分享到:
评论

相关推荐

    window.addEventListener来解决让一个js事件执行多个函数

    第三个参数`useCapture`在此处通常设为`false`,表示在冒泡阶段调用事件处理函数。 此外,对于DOM元素的事件处理,如按钮点击事件,也可以使用相同的方法。例如,对于一个ID为"btn1"的按钮,我们希望在点击时执行`...

    document.addEventListener使用介绍

    3. **第三个参数**:可选的布尔值,用于指定事件处理程序的执行顺序。默认值为`false`。如果设置为`true`,事件处理程序将在捕获阶段执行;如果设置为`false`,则在冒泡阶段执行。在这个上下文中,"捕获阶段"意味着...

    addEventListener()第三个参数useCapture (Boolean)详细解析

    3. **useCapture**:第三个参数是一个可选的布尔值,默认为 `false`。如果设置为 `true`,事件处理程序将在捕获阶段执行;如果为 `false`,则在冒泡阶段执行。捕获阶段从最外层的祖先元素开始,向下到目标元素;冒泡...

    share.js自定义分享到第三方SNS平台的JS插件

    **Share.js:自定义分享到第三方SNS平台的JS插件** Share.js 是一个轻量级的JavaScript插件,专为网页内容提供一键分享功能,它使得用户可以方便地将网页内容分享到各种社交媒体平台,如微博、QQ空间、QQ好友、微信...

    attachEvent和addEventListener 使用方法

    这里的第三个参数是可选的,表示事件是否在捕获阶段处理(`true`)或在冒泡阶段处理(`false`,默认)。默认情况下,事件通常从最外层元素开始向下传播,即捕获阶段,然后到达目标元素并开始冒泡回顶部,这个过程...

    js.rar_js

    使用`addEventListener`的第三个参数可以指定事件处理方式: ```javascript // 使用捕获模式添加事件处理 document.getElementById('parent').addEventListener('click', function(event) { console.log('...

    JS中onclick与addEventListener的区别详解

    第三个参数是一个布尔值,用于指定事件传播模式,默认是`false`表示冒泡阶段,`true`表示捕获阶段。 - 移除事件:使用`removeEventListener`方法,需要提供相同的事件名和处理函数来移除事件。匿名函数添加的事件...

    mobileSelect.js.rar

    接着,通过JavaScript初始化mobileSelect.js,并传入配置参数,如选项列表、默认选中项等。这样,当用户点击触发器时,底部弹窗选择框就会自动弹出。 例如,我们可以这样使用mobileSelect.js: ```html &lt;!DOCTYPE ...

    详解addEventListener的三个参数之useCapture

    而第三个参数`useCapture`则是一个可选的布尔值,它决定了事件处理的阶段是在捕获阶段还是冒泡阶段进行。 事件的传播过程分为两个阶段:捕获阶段和冒泡阶段。在捕获阶段,事件从最外层的祖先元素开始向下传播,直到...

    javascript attachEvent和addEventListener使用方法

    使用 addEventListener 方法时,还可以指定第三个参数 `useCapture`,这个参数是一个布尔值,表示事件监听器是在捕获阶段还是冒泡阶段被调用。如果设置为 `true`,则在捕获阶段调用;如果设置为 `false`,则在冒泡...

    Javascript图片文字识别插件JS-OCR.zip

    在这个JS-OCR插件中,我们可以通过JavaScript在浏览器环境中实现这一功能,而无需依赖后端服务器或者第三方API。 1. OCR基础原理: OCR技术基于图像处理和模式识别。首先,图像被转换为灰度图像以增强对比度,然后...

    -vue.js学习笔记

    `addEventListener`方法可以用来添加事件监听器,第三个参数可以设置为`true`来启用捕获模式,否则默认为冒泡模式。例如,如果在DOM树中从父元素到子元素添加事件监听器,捕获模式会让事件首先在父元素触发,然后...

    js中常用函数.doc

    - 第三个参数:窗口的属性设置。 #### 二、鼠标和事件相关函数 **6. `click()`** - **功能**:模拟点击事件。 - **示例**: ```javascript document.getElementById("myButton").click(); ``` **7. `closed...

    js window.open iframe dialog

    在JavaScript的世界里,`window.open`、`iframe`和`dialog`是三个非常重要的概念,...在实际开发中,这些技术常用于创建弹出窗口、嵌入第三方内容以及实现页面间的通信。记住,正确地使用它们可以显著提升用户体验。

    如何在 HTML 中调用 JavaScript 函数而不使用 onclick.docx

    在这个例子中,`addEventListener` 方法的第一个参数是事件类型(如 "click"),第二个参数是要执行的函数。 2. 使用匿名函数: ```javascript document.getElementById("myButton").addEventListener("mouseover",...

    javascript动态添加事件.pdf

    第三个参数`useCapture`通常设置为`false`,表示事件冒泡阶段。 3. **事件处理程序赋值**: - 直接将函数赋值给事件属性,如 `obj.onclick = Foo`,这是较早的事件绑定方式,适用于大多数浏览器。这种方法简单直观...

    javascript事件查询综合

    可以通过设置`addEventListener`的第三个参数切换这两种模式: ```javascript element.addEventListener('click', function(event) { // ... }, false); // 默认冒泡 element.addEventListener('click', function...

    scene.js基于css3绘制熊猫吃竹子动画.zip

    首先,CSS3是层叠样式表(Cascading Style Sheets)的第三个版本,它引入了强大的动画功能,如关键帧动画(@keyframes),使得开发者可以轻松地创建出复杂的视觉效果。在“熊猫吃竹子”的动画中,我们将主要运用这一...

Global site tag (gtag.js) - Google Analytics