©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>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>