element.addEventListener(event, function, useCapture)
addEventListener
有三个参数,大多数人个别只用到了两个参数
- 第一个参数
event
指定事件名。 - 第二个参数
function
指定要事件触发时执行的函数。 - 第三个参数
useCapture
,true——事件句柄在捕捉阶段执行;false——默认值。事件句柄在冒泡阶段执行
事件捕捉过程和冒泡过程如上图所示,传递形式别离是由上而下和由下而上。依据图示,能够写个demo来验证这个问题,addEventListener
第三个参数设置为true
level-1为div标签,level-2为p标签,level-3为span标签
绑定事件,测试代码如下
const levelOne = document.getElementById("levelOne");const levelTwo = document.getElementById("levelTwo");const levelThree = document.getElementById("levelThree");window.addEventListener( "click", function (e) { console.log("window 捕捉", e.target.nodeName, e.currentTarget.nodeName); }, true);levelOne.addEventListener( "click", function (e) { console.log("levelOne 捕捉", e.target.nodeName, e.currentTarget.nodeName); }, true);levelTwo.addEventListener( "click", function (e) { console.log("levelTwo 捕捉", e.target.nodeName, e.currentTarget.nodeName); }, true);levelThree.addEventListener( "click", function (e) { console.log("levelThree 捕捉", e.target.nodeName, e.currentTarget.nodeName); }, true);
其中e.target.nodeName
指以后点击的元素,e.currentTarget.nodeName
为绑定监听事件的元素
console.log("levelThree 捕捉", e.target.nodeName, e.currentTarget.nodeName);
当点击最里层SPAN标签时,打印如下
最先捕捉的是window
,输入 e.target.nodeName
为SPAN,window没有标签属性,e.currentTarget.nodeName
为undefined
上面levelOne到levelThree顺次捕捉,e.target.nodeName
输入都为点击的SPAN标签,为大小,e.currentTarget.nodeName
为绑定监听事件的元素
由此可见,捕捉阶段从上往下传递
冒泡事件
代码批改一下,第三个参数改为false。
当点击最内层SPAN标签时,打印程序如下
当点击levelTwo时,这时最内层的SPAN标签没有捕捉到冒泡事件。
stopPropagation
stopPropagation() 办法避免调用雷同事件的流传。
当有需要,心愿事件进行流传或有额定操作时,能够在事件捕捉阶段进行拦挡,比方点击最内层span标签时,如果我在levelOne就对事件进行了拦挡,事件将不会持续乡下传递
levelOne.addEventListener( "click", function (e) { e.stopPropagation() console.log("levelOne 捕捉", e.target.nodeName, e.currentTarget.nodeName); }, true);
打印如下
preventDefault
preventDefault() 阻止默认行为
内层span标签有个a标签,链接用于跳转百度首页。增加阻止默认行为代码后
aHref.addEventListener("click", function (e) { e.preventDefault();});
点击a标签,控制台只打印了捕捉和冒泡事件的打印