js 事件委托（事件代理）思路解析

海胆Sur

已于 2023-05-06 00:48:19 修改

阅读量256

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端 html

于 2021-08-11 20:46:47 首次发布

本文链接：https://blog.csdn.net/I_fole_you/article/details/119138622

版权

JavaScript 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

事件委托

简单来说就是将事件委托给父级处理

默认事件的传播方式是冒泡，即子级产生一个事件会逐级的向父级传播，有响应的响应函数就会被触发。
event 的target属性可以获得冒泡的首层

基于这两个基本概念，我们可以在父级设置响应函数来处理子级的事件
也就是说我们可以在父级统一管理子级的事件也就是代理

function changeTag(e) {
  let target = e.target || e.srcElement;
  if (target.tagName.toLowerCase() === "li") {
    let lis = document.querySelectorAll("ul li")
    let index = Array.prototype.indexOf.call(lis, target)
    alert(target.innerHTML + index)
  }
}