事件代理

简单情况的事件代理写法

假设是这个么结构，然后现在要监听的是 父容器 ul :

  <ul class="parent">
    灰色的是父容器 ul ，白色区域是 子元素 li 
    <li class="child">child 1</li>
    <li class="child">child 2</li>
    <li class="child">child 3</li>
    <li class="child">child 4</li>
  </ul>

那么我们的监听代码可以这么写：

let parent = document.querySelector('.parent')
parent.addEventListener('click',handler)
function handler(e) {
/*   if(e.target.tagName.toLowerCase() === 'li') {
      console.log(e.target.innerText)
  }
  */
  if(e.target.matches('li')) {
     console.log(e.target.innerText)
  }
}

点击这里 预览

比较稍复杂的情况 ---- 递归

  <div id="result">
    假设现在要监听的是child 元素，但是监听器绑定在 result容器上
    <ul class="parent">
      <li class="child">
        <a href="#">child 1</a>
        <span>1 </span>
      </li>
      <li class="child">
        <a href="#">child 2</a>
        <span>2</span>
      </li>
      <li class="child">
        <a href="#"> child 3 </a>
        <span>3 </span>
      </li>
      <li class="child">
        <a href="#"> child 4 </a>
        <span> 4 </span>
      </li>
    </ul>
  </div>

监听代码：

let result  = document.getElementById('result')

result.addEventListener('click',handler)
function handler(e) {
  let target = e.target;
  while(target !== result){
    if(target.tagName.toLowerCase() === 'li'){
       console.log(target.innerText);
       break;
    } 
    target = target.parentNode;    
  }
}

点击这里 预览