手写通用事件监听函数
事件代理和事件冒泡
-
事件代理：
事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
-
事件冒泡：
当要多个子元素绑定同一事件时，可使其父元素绑定此事件，这样会从触发元素向父元素冒泡，也就是p1->div2->body,其中如果有不需要绑定事件冒泡的元素即可用
event.stopPropagation(); //阻止冒泡
普通事件绑定和事件代理绑定
HTML文件为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件 演示</title>
<style>
div {
border: 1px solid #ccc;
margin: 10px 0;
padding: 0 10px;
}
</style>
</head>
<body>
<button id="btn1">一个按钮</button>
<div id="div1">
<p id="p1">激活</p>
<p id="p2">取消</p>
<p id="p3">取消</p>
<p id="p4">取消</p>
</div>
<div id="div2">
<p id="p5">取消</p>
<p id="p6">取消</p>
</div>
<div id="div3">
<a href="#">a1</a><br>
<a href="#">a2</a><br>
<a href="#">a3</a><br>
<a href="#">a4</a><br>
<button>点击增加a标签.</button>
</div>
<script src="./event.js"></script>
</body>
</html>
- 普通事件绑定：把事件绑定在这个按钮元素上
const btn1 = document.getElementById ('btn1');
bindEvent( btn1, ' click ', function( event ){
//这里有三个参数！！
event.preventDefault();//阻止默认行为
alert(this.innerHTML); //如果用的是箭头函数的话 这句要改成alert(btn1.innerHTML);
})
- 事件代理绑定：把这个事件绑定给父元素
const div = document.getElementById ('div3');
bindEvent( div3, ' click ', 'a' , function( event ){
//这里是四个参数！！第三参数为css选择器，选择的所有a标签
event.preventDefault();//阻止默认行为 阻止链接点击打开链接的默认行为，去触发绑定的事件
alert(this.innerHTML); //如果用的是箭头函数的话 这句要改成alert(event.target.innerHTML);
})
通用的事件监听函数
// 通用的事件绑定函数
// function bindEvent(elem, type, fn) {
// elem.addEventListener(type, fn)
// }
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
//判断有几个参数，如果fn等于空 就有三个参数，说明是普通绑定
fn = selector
selector = null //普通绑定没有selector赋值为空
}
elem.addEventListener(type, event => {
const target = event.target //获取目标元素
if (selector) {
// 代理绑定
if (target.matches(selector)) {
fn.call(target, event)
}
} else {
// 普通绑定
fn.call(target, event)
}
})
}