0x00 事件流
removeElementListener();可以解除元素的事件监听器绑定
事件流是页面中接受事件的传递顺序,包括捕获阶段,当前目标阶段,冒泡阶段
注意,Js只能执行冒泡或者捕获中的一个阶段;
onclick等注册事件以及attachEvent只能得到冒泡阶段;
addEventListener()若第三个参数为false(默认就是false),则也是冒泡阶段调用事件处理程序;而若第三个参数为true,则在捕获阶段调用事件处理程序;
<div class="father">
<p class="son">123</p>
</div>
<script>
let father = document.querySelector('.father');
let son = document.querySelector('.son');
father.addEventListener('click', () => {
alert('father');
});
son.addEventListener('click', () => {
alert('son');
});
</script>
如上,这个例子点击son元素会先弹出son后弹出father;这是因为在事件的冒泡阶段先访问son后访问father
若加上true参数,则先弹出father后弹出son
<div class="father">
<p class="son">123</p>
</div>
<script>
let father = document.querySelector('.father');
let son = document.querySelector('.son');
father.addEventListener('click', () => {
alert('father');
},true);
son.addEventListener('click', () => {
alert('son');
},true);
</script>
另外注意,onblur,onfocus,onmouseenter,onmouseleave是没有冒泡的
0x01 事件对象
事件对象保存的当前事件的信息
let div = document.querySelector('.name');
div.addEventListener('click',(event) => {
console.log('第一种方法,兼容性较好')
})
div.addEventListener('click',(e) => {
console.log('第二种方法,ie9以上才支持')
})
获取触发事件对象的方法
e.target // 标准写法
e.srcElement // 非标准写法 ie6-8
另外注意 e.target和this的区别
e.target // 获取的是触发事件的对象,click事件就是返回鼠标点击的元素
this // 获取的是绑定事件的元素
返回事件类型:e.type;