addEventListener参数和冒泡和捕获详细使用与说明

最新推荐文章于 2024-08-27 15:41:08 发布

dupha

最新推荐文章于 2024-08-27 15:41:08 发布

阅读量6k

点赞数 4

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/mingketao/article/details/124519241

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

addEventListener第三参数冒泡和捕获详细说明

1.addEventListener参数说明

target.addEventListener(type, listener, useCapture);

参数一: type
表示监听事件类型的字符串。
参数二: listener
当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。有关回调本身的详细信息，请参阅事件监听回调
参数三: options 可选
一个指定有关 listener 属性的可选参数对象。可用的选项如下：
capture: Boolean，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。(useCapture 默认为 false )

2.useCapture的冒泡和捕获区别,请看案例(最下方为源代码)

当点击div "fang4"时,useCapture的改变案例如下

2.1下方4个div的addEventListener中useCapture默认全为false时,触发事件顺序

在这里插入图片描述

2.2下方4个div的addEventListener中useCapture默认全为true时,触发事件顺序

在这里插入图片描述

2.3下方4个div的useCapture分别为fang1捕获true,fang2冒泡false,fang3捕获true,fang4冒泡false

在这里插入图片描述

2.4下方4个div的useCapture分别为fang1冒泡false,fang2捕获true,fang3冒泡false,fang4捕获true

在这里插入图片描述

源代码add.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>addEventListener</title>
</head>
<body>
  <div id="fang1">fang1
   <div id="fang2">fang2
     <div id="fang3">fang3
       <div id="fang4">fang4
       </div>
     </div>
    </div>
  </div>
</body>
<style>
  #fang1{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
  }
  #fang2{
    width: 150px;
    height: 150px;
    background-color: green;
  }
  #fang3{
    width: 100px;
    height: 100px;
    background-color: yellow;
  }
  #fang4{
    width: 50px;
    height: 50px;
    background-color: olivedrab;
  }
  
</style>
<script>
var fang1 = document.getElementById("fang1");
var fang2 = document.getElementById("fang2");
var fang3 = document.getElementById("fang3");
var fang4 = document.getElementById("fang4");

fang1.addEventListener("click", function(e){
  console.log(1)
},false)
fang2.addEventListener("click", function(e){
  console.log(2)
},false)
fang3.addEventListener("click", function(e){
  console.log(3)
},false)
fang4.addEventListener("click", function(e){
  console.log(4)
},false)
</script>
</html>