JS的addEventListener方法
- addEventListener方法是将监听器绑定到某个Document元素上，当触发指定事件时，执行指定的回调函数，只要当前Document未被销毁掉，该事件就会被调用，如：
<div class="list-bottom load-more">加载更多</div>
document.querySelector('.load-more').addEventListener('click', function(e) {
console.log('加载更多')；
}
// 此时点击div会触发点击事件
// 当div去掉“load-more”时
<div class="list-bottom">加载更多</div>
// 此时点击div仍然会触发点击事件，可以通过判断某个class是否存在来阻止事件继续执行，即触发该事件但并不执行操作
document.querySelector('.load-more').addEventListener('click', function(e) {
if (! this.classList.contains("load-more")) return;
console.log('加载更多')；
}
- addEventListener的参数：dom.addEventListener(type, listener, useCapture );
type:事件触发的类型;
listener:当监听的事件被触发后所执行的操作;
useCapture :可选参数,Boolean类型,默认为false.在一个DOM树中,最外面的根元素注册了listener,当DOM树中的某一子元素触发该事件时,是否会触发其父节点绑定的事件.
捕获、绑定和冒泡
捕获:多层DOM树,鼠标触发DOM事件时,浏览器会从根节点开始向内进行事件传播,如果父元素绑定了相同事件则会先触发父元素事件.
<html>
<body>
<div id="d1">parent
<div id="d2">child</div>
</div>
</body>
<script>
document.body.addEventListener('click', function(e) {
console.log('body-cap');
}, true);
document.querySelector('#d1').addEventListener('click', function(e) {
console.log('parent-cap');
}, true);
document.querySelector('#d2').addEventListener('click', function(e) {
console.log('child-cap');
}, true);
</script>
</html>
// 输出结果
body-cap
parent-cap
child-cap
冒泡:与传播恰好相反,由触发事件节点向根节点传播事件.
<body>
<div id="d1">parent
<div id="d2">child</div>
</div>
</body>
<script>
document.body.addEventListener('click', function(e) {
console.log('body');
});
document.querySelector('#d1').addEventListener('click', function(e) {
console.log('parent');
});
document.querySelector('#d2').addEventListener('click', function(e) {
console.log('child');
});
</script>
</html>
// 输出结果
child
parent
body
网友评论