addEventListener事件第三个参数的作用

来源:网络 文章列表 2019-12-12 8
DOM方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。 这两个方法都需要三个参数,分别为:事件名称(String)、要触发的事件处理函数(Function)、指定事件处理函数的时期或阶段(boolean)。当第三个参数设置为true就在捕获过程中执行,反之就在冒泡过程中执行处理函数

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里面。如下图所示

给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等等,根据结果就能更好的理解这两个概念了。

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接