js【详解】事件

给 DOM 节点绑定事件

推荐使用 addEventListener 函数

第一个参数：事件名称
第二个参数：事件处理函数（第一个参数为 event）
第三个参数：
- true 采用捕获法来处理事件
- false 【推荐】采用冒泡法来处理事件

let div1= document.getElementById('div1');
div1.addEventListener('click', function(event){alert('div1_clicked!');
}, false);

event 参数的用途

event.target 获取触发事件的元素
event.preventDefault() 阻止默认行为

默认行为如：a标签点击跳转、鼠标右键弹出菜单、滑动滚轮控制滚动条等
event.stopPropagation() 阻止事件传播（冒泡/捕获）

事件流（含事件冒泡，事件捕获）

https://blog.csdn.net/weixin_41192489/article/details/133140101

【必考】事件代理

借助其他元素来响应自身事件即事件代理。

应用范例：对于内容很多的列表，为了避免给每一个列表中的元素都绑定一个点击事件，仅在列表的容器元素上绑定点击事件，则当点击列表中的元素时，因事件冒泡机制，会触发容器元素的点击事件，再在该事件中，识别出点击的具体元素，并执行相应的处理。

// 列表内容很多的容器
const div3 = document.getElementById("div3");// 点击列表中a标签的元素时，弹窗显示其内容
div3.addEventListener("click", (event) => {event.preventDefault();let target = event.target;if (target.nodeName === "A") {alert(target.innerHTML);}
});

【考题】写一个通用的事件绑定函数

/*** 通用的事件绑定函数(支持事件代理)* @param {*} elem      触发事件的元素* @param {*} type      事件类型* @param {*} selector  选择器* @param {*} fn        事件处理函数*/
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); // 利用 call 改变事件处理函数中 this 的指向}} else {// 没有选择器，为普通事件绑定fn.call(target, event);}});
}

使用

// 普通事件绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {event.preventDefault()alert(this.innerHTML)
})// 事件代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {event.preventDefault()alert(this.innerHTML)
})