JavaScript の 事件委托

事件委托

原理

将元素本身的事件通过冒泡委托给父元素

所以将需要添加给子元素的事件写到父元素上，当触发子元素时，会冒泡到父元素身上，从而触发父元素事件

实现

• 获得对应的子元素

使用事件对象的target属性

e.target 就是对应的子元素对象

const a=document.querySelector('ul')
a.addEventListener('click',function(e){
    e.target.style.color='red'//点击的子元素文字变色
})

• 筛选对应的子元素

利用元素对象的 tagName 属性

tagName就是对应的元素名称

例如一个li元素的 tagName 就是 ‘LI’ （注意引号与大写）

const a=document.querySelector('ul')
a.addEventListener('click',function(e){
    if(e.target.tagName==='LI')
    {
      e.target.style.color='red'//点击的li子元素变色，其余元素不变色
    }
})