编写一个通用的事件监听函数
首先一个 html 结构代码
js
<button id="btn1">按钮</button>
实现事件绑定
js
// 事件绑定函数
function bindEvent(elem, type, fn) {
elem.addEventListener(type, fn);
}
const btn1 = document.getElementById('btn1');
bindEvent(btn1, 'click', (event) => {
console.log(event.target); // <button id="btn1">按钮</button>
event.preventDefault(); // 阻止默认行为
alert('clicked');
});
通用的事件监听函数
js
// 通用的事件绑定函数
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
fn = selector;
selector = null;
}
elem.addEventListener(type, (event) => {
const target = event.target;
if (selector) {
// 代理绑定
if (target.matches(selector)) {
fn.call(target, event);
}
} else {
// 普通绑定
fn.call(target, event);
}
});
}
const btn1 = document.getElementById('btn1');
bindEvent(btn1, 'click', function (event) {
//
console.log(this.innerHTML); // 按钮
});
需要注意的是 this.innerHTML 的指向,此时不能是 event=>{} , 而需要使用 function(event){}