Handwritten general event listener function
Event delegation and event bubbling
-
Event delegate:
Event delegation (Event Delegation), also known as event delegation. is a common technique for binding events commonly used in JavaScript. As the name suggests, "event proxy" is to delegate the response events (click, keydown...) that originally need to be bound to the child elements to the parent element, and let the parent element take on the role of event monitoring. The principle of event proxy is the event bubbling of DOM elements .
-
Event bubbling:
When multiple child elements are bound to the same event, the parent element can be bound to this event, which will bubble from the trigger element to the parent element, that is, p1->div2->body, if there is no Elements that need to bind event bubbling are available
event.stopPropagation(); //阻止冒泡
Normal event binding and event proxy binding
The HTML file is
<!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>
- Normal event binding: bind the event to this button element
const btn1 = document.getElementById ('btn1');
bindEvent( btn1, ' click ', function( event ){
//这里有三个参数！！
event.preventDefault();//阻止默认行为
alert(this.innerHTML); //如果用的是箭头函数的话 这句要改成alert(btn1.innerHTML);
})
- Event proxy binding: Bind this event to the parent element
const div = document.getElementById ('div3');
bindEvent( div3, ' click ', 'a' , function( event ){
//这里是四个参数！！第三参数为css选择器，选择的所有a标签
event.preventDefault();//阻止默认行为 阻止链接点击打开链接的默认行为，去触发绑定的事件
alert(this.innerHTML); //如果用的是箭头函数的话 这句要改成alert(event.target.innerHTML);
})
General event listener function
// 通用的事件绑定函数
// 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)
}
})
}