前面写过在元素标签里写onclick();和获取元素通过js添加onclick,这次记addEventListener方法
上一篇记事件响应链的时候记了两个div的嵌套时响应问题(响应链),这次还用嵌套来记addEventListener
先准备好两个嵌套的div,并设置不同的背景色和大小
<div id="outer">
<div id="inner"></div>
</div>
设置css:
#outer {
width: 100px;
height: 100px;
background-color: red;
}
#inner {
width: 50px;
height: 50px;
background-color: blue;
}
js代码:
<script>
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
// 元素对象的addEventListener方法,为元素添加一个事件监听,第一个参数是要监听的事件类型,第二个参数是事件函数,第三个参数可选,是否在捕获阶段监听,默认为false;
// 相比于前两种监听方法,这种方法可以为同一个元素的同一个事件添加多个事件函数
outer.addEventListener("click",function(e){
console.log("outer捕获阶段");
// e.stopPropagation();
},true);
outer.addEventListener("click",function(e){
console.log("outer冒泡阶段");
},false);
function f1(e){
console.log("inner捕获阶段");
}
inner.addEventListener("click",f1,true);
inner.addEventListener("click",function(e){
console.log("inner冒泡阶段");
},false);
// 在事件响应链中任何阶段都可以阻止事件的传播
// removeEventListener移除已经添加过的事件监听
inner.removeEventListener("click",f1,true);