利用事件冒泡的机制,把事件绑定到父元素上,适用于瀑布流场景,可以减少浏览器的内存占用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
</head>
<body>
<div>
<button id="btn">按钮</button>
<ul id="divBox">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script src="./event.js"></script>
</body>
</html>
function bindEvent(ele, type, selector, fn) {
if (fn == null) {
fn = selector;
selector = null;
}
ele.addEventListener(type, event => {
const target = event.target;
if (selector) {
// 代理绑定
if (target.matches(selector)) { // 判断一个DOM元素是不是符合于选择器
fn.call(target, event); // call方法可以改变this指向
}
} else {
// 普通绑定
fn.call(ele, event);
}
})
}
// 普通绑定
const btn = document.getElementById('btn');
bindEvent(btn, 'click', function (e) { // 这里不能用箭头函数,否则函数里的 this 指向的是上级作用域的this,即window
e.preventDefault();
console.log(this);
alert(this.innerText);
})
// 代理绑定
const div = document.getElementById('divBox');
bindEvent(div, 'click', 'li', function (e) {
e.preventDefault();
alert(this.innerText);
})