function bindEvent(elem, type, selector, fn) {
// 判断有几个参数
if (fn == null) {
// 只有3个参数,fn赋值传入的第三个参数
fn = selector;
selector = null;
}
elem.addEventListener(type, (event) => {
const target = event.target;
if (selector) {
// 代理绑定
// dom元素是否符合元素选择器
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(event.target) // 获取触发的元素
event.preventDefault(); // 阻止默认行为
alert(this.innerHTML);
});
// 箭头函数
bindEvent(btn1, "click", (event) => {
// console.log(event.target) // 获取触发的元素
event.preventDefault(); // 阻止默认行为
alert(btn1.innerHTML);
});
// 代理绑定使用
const div3 = document.getElementById("div3");
bindEvent(div3, "click", "a", function (event) {
event.preventDefault();
alert(this.innerHTML);
});
// 用箭头函数
bindEvent(div3, "click", "a", (event) => {
event.preventDefault();
alert(event.target.innerHTML);
});
手写通用的事件监听函数(包含普通绑定和代理绑定)
于 2024-07-25 16:42:56 首次发布