js中addEventListener第三个参数涉及到的事件捕获与冒泡

js中,我们可以给一个dom对象添加监听事件,函数就是

  • addEventListener("click",function(){},true);

很容易理解,第一个参数是事件类型,比如点击(click)、触摸(touchstart),

第二个参数就是事件函数,

比如我给一个button添加alert函数。

window.onload=function(){
document.getElementById("hello").addEventListener("onkeydown",function () {
alert("hello");
});
}

那么第三个参数是什么呢?这个参数设计到事件的捕获与冒泡,为true时捕获,false时冒泡。

什么意思呢?

我举个简单的例子,我有两个div和一个button,button在div2里面,div2在div1里面。如下图所示

image

给button、div1、div2、都添加了click事件,分别alert button、div1、div2。

window.onload=function(){
document.getElementById("btn").addEventListener("click",function () {
// body...
alert("hello");
});
document.getElementById("div1").addEventListener("click",function(){
alert("div1");
});
document.getElementById("div2").addEventListener("click",function(){
alert("div2");
});
}

那么问题就来了,我点击button,也相当于点击了div1和div2,那么,谁先出现呢?

直观的讲,谁在上面,谁在下面。

所以,在js中就分为了两个处理方法,冒泡和捕获。

  • 冒泡:从里面往外面触发事件,就是alert的顺序是 button、div2、div1。

  • 捕获:从外面往里面触发事件,就是alert的顺序是div1、div2、button。

要想冒泡,就要将每个监听事件的第三个参数设置为false,也就是默认的值。

要想捕获,就要将每个监听事件的第三个参数设置为true。

好了,就讲这么多了。为了更好的理解冒泡和捕获,大家可以给三个事件的第三个参数随便设置,就是说不同时设置为true或false,

给button为true,div1为false等等,根据结果就能更好的理解这两个概念了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 多次遇到事件冒泡与捕获相关的题目,冒泡和捕获机制在不同浏览器中的兼容性也不相同,IE中默认只支持冒泡机制,冒泡和捕...
    啊鹰的阅读 756评论 0 6
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,069评论 1 10
  • 事件绑定的方式 给 DOM 元素绑定事件分为两大类:在 html 中直接绑定 和 在 JavaScript 中绑定...
    Bruce_zhuan阅读 1,055评论 0 6
  • DOM0级和DOM2级在事件监听使用方式上有什么区别? DOM0级事件监听:用JavaScript指定事件处理程序...
    LeeoZz阅读 388评论 0 1
  • 有些人只有处了才能看透,有些事只有经历了才算成长,吃一堑,长一智嘛,老婆最近捣弄些服装,衣服没卖出几件,进货倒是跑...
    金水湾阅读 165评论 0 0