欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

事件代理是什么?详解其工作原理及优劣

最编程 2024-08-07 13:57:28
...
//事件委托: 给父元素tbody注册点击事件,委托子元素tr来处理 //有动态新增 (同时新增的父元素tbody不能注册事件,所以用body注册点击事件) document.body.onclick = function (e) { /* 需明确 e.target --> a标签(.delete) e.target.parentNode --> td 删除按钮的父亲是td e.target.parentNode.parentNode --> tr td的父亲是tr */ let tr = e.target.parentNode.parentNode let tbody = document.querySelector('tbody') //判断点击的是否是删除按钮 //取反,如果不是,则不执行 if (!e.target.classList.contains('delete')) return //如果是的话,删除该tr tbody.removeChild(tr) /* 后续的上移和下移则与删除异曲同工,需要提醒的是: (1)同级之间: 查上级元素: 元素.previousElementSibling 查下级元素: 元素.nextElementSibling (2)增加到元素前面:父元素.insertBefore(元素,哪个元素前面) */

推荐阅读