什么是事件委托?
可以理解为给父元素注册事件,委托给子元素进行处理.
事件委托可以达到什么效果?
可以给‘动态新增’元素注册事件
事件委托的原理是什么?
原理就是事件冒泡
什么是事件冒泡:当触发子元素的事件时候，所有的父级元素‘同名事件’会被依次触发
它的触发规则是:子元素->父元素->body->html->document->window
依靠这个规则就可以实现事件委托,下面是代码:
如何删除表格里面的tr,注意这里的tr是动态新增的,所以无法直接注册点击事件
/* 点击删除 : 删除是动态新增元素，需要注册委托事件
事件委托 : 给父元素注册， 委托子元素处理
* 父元素也不能是新增的，如果分不清楚，也可以直接给body注册
e.target :a标签 删除按钮
e.target.parentNode : td
e.target.parentNode.parentNode : tr
*/
//事件: 给父元素注册
let tbody = document.querySelector('tbody')
tbody.onclick = function (e) {
console.log(e.target)
//委托: 找到委托的子元素: 判断到底是不是删除按钮
if (e.target.classList.contains('delete')) {
document.querySelector('tbody').removeChild(e.target.parentNode.parentNode)
}
}
事件委托的注意点:
//委托: 找到委托的子元素: 判断到底是不是删除按钮
if (e.target.classList.contains('delete'))
不能用this:这里的this是指向的事件源(父元素),而需要使用e.target : 指向事件目标 (触发本次冒泡的子元素)
