事件监听与捕获
事件监听器,是什么,是监听事件的函数,给节点绑定事件监听器 ,当监听到有事件时就立即调用处理函数。混合开发用,安全。
实例:
//html结构,通过一个按钮来体验一波。
<input type="button" value="点击" id="btn">
A,B两个人混合开发这个按钮的不同功能;
btn.onclick = function () {
alert('A同学的功能');
}
btn.onclick = function () {//最终起作用的是这句
alert('B同学的功能');
}
当项目完成时,需要合并代码,假如把他们的代码写在一起,当点击btn按钮时。那么,谁的代码写在后面谁的就有作用的那个,此时A同学可能要完蛋了,项目经理说:你的绩效没了,你什么都没做。
这个时候,我们就需要事件监听来让各自写的功能都能够执行。
事件监听器
- w3c标准写法
节点.addEventListener('event', fn, true | false);
event: 第一个参数,事件名称,不带 on,要有引号
fn:事件处理函数,也就是功能部分,可外置。
第三参数:bool值,是否捕获,false:(不捕获)冒泡 true:捕获(反冒泡)
- IE8- 的写法
attchEvnet(“带on的事件名”, 回调函数)
运用事件监听来解决A、B同学的问题。
btn.addEventListener('click', function () {
alert('A同学的功能');
}, false);
btn.addEventListener('click', function () {
alert('B同学的功能');
}, false);
这样子的话A、B同学的功能都能够实现了。(谁在前先执行谁的)
移除事件监听事件
有绑定就肯定有解绑,方法为:
- W3C标准:
ele.removeEventListener(‘click’,fn, true)
传入的所有参数(包括函数)必须与事件监听器中一致,否则不能移除事件 - IE8-:
ele.detachEvent(‘onclick’,fun)
,传入的参数fun要跟添加时一样,否则不能移除事件
页面事件绑定数量越多,越影响性能(速度越慢)
注意:解绑的时候需要注意的是,要通过函数句柄的方式传入参数,直接写完整的function进去是解绑不了得的
正确写法为
function oneTest() {
alert('A同学的功能');
}
btn.addEventListener('click', oneTest);
btn.addEventListener('click', function(){
alert('B同学的功能');
});
btn.removeEventListener('click', oneTest); //解除A同学功能,A的弹窗不会弹出
//此处我没写有第三个参数,写不写看个人。
事件捕获
事件捕获就是一个反冒泡的过程,捕获方向由外到内,是否捕获为事件监听器的第三个参数。
先捕捉,先输出,不捕捉冒泡顺序输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的捕获</title>
<style>
div,
span {display: block;padding: 50px;}
</style>
</head>
<body>
<div id="father" style="background: forestgreen">
<span id="son" style="background: gold"></span>
</div>
</body>
<script>
(function () {
var father = document.getElementById('father');
var son = document.getElementById('son');
//事件绑定
window.addEventListener('click', function () {
console.log('window');
}, true);
son.addEventListener('click', function () {
console.log('span');
}, false);//false:冒泡 true:捕获(反冒泡)
father.addEventListener('click', function () {
console.log('div');
}, false);
document.body.addEventListener('click', function () {
console.log('body');
}, false);
document.addEventListener('click', function () {
console.log('document');
}, true);
})();
</script>
</html>