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)
})

【考题】描述事件冒泡的流程

事件基于 DOM 树形结构顺着触发元素不断向上传播（由内层节点传播到外层节点），触发各级父辈节点对应的事件，若父辈节点中没有阻断事件的冒泡传播，则会一直传播到window 对象。

应用场景：事件代理（参考上文）

【考题】无限下拉图片列表，如何监听每个图片的点击

通过事件代理实现，具体逻辑如下：

• 在列表容器上绑定点击事件
• 点击图片时，会冒泡触发列表容器的点击事件
• 通过 e.target 获取到触发元素
• 通过 matches 判断触发元素是否是图片
• 是图片，则执行相应的代码，不是图片则不执行。