如何优雅的写事件代理

如何优雅的写事件委托

记得在一个技术面试的时候，面试官问我如果有无数个dom，如何给每个dom添加点击事件，点击获取当前dom的内容，并且要我在编辑器里面写出来，好家伙，我第一个就想到事件委托,下面列出常用的几个事件委托的写法

题目如下

点击li获取当前li的内容

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  ...
</ul>

Element.closest()

Element.closest() 方法用来获取：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 null。

let ul=document.querySelector('ul')
ul.addEventListener('click',(e)=>{
 let text= e.target.closest('li').textContent
 console.log(text)
})

Element.matches()

Element.matches()如果元素被指定的选择器字符串选择，Element.matches()  方法返回true; 否则返回false。

let ul=document.querySelector('ul')
ul.addEventListener('click',(e)=>{
  if(e.target.matches('li')){
   let text= e.target.textContent
   console.log(text)
  }
})

css属性：pointer-events 阻止元素成为鼠标事件

可以在css层面去掉点击事件。 该属性也可用来提高滚动时的帧频。的确，当滚动时，鼠标悬停在某些元素上，则触发其上的hover效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。对body元素应用pointer-events：none，禁用了包括hover在内的鼠标事件，从而提高滚动性能。