事件代理

@Event Delegation

.默认情况下，子元素的事件会冒泡到父元素

.所以父元素可以响应任何一个子元素的事件；利用这个特性可以让父元素作为各个子元素的代理

.单击 outer，事件对象 target 是 outer；没有冒泡，所以响应对象 currentTarget 也是 outer

.单击 <p>，事件对象 target 是 <p>；然后冒泡到 outer，所以响应对象 currentTarget 是 outer

.同理，单击 <span>，事件对象 target 是 <span>；然后冒泡到 outer，所以响应对象 currentTarget 是 outer

<div class="outer" @click="doOut">
  <p class="inner">1111</p>
  <span class="inner">2222</span>
</div>

通过判断 target 来确定单击了哪个子元素；可以根据子元素的标签名（大写）或自定义数据 data-判断

const doOut = (e) => {
  console.log(e.target.tagName);
  console.log(e.target.dataset.id);
  console.log(e.target.innerHTML);
}

[] 单击标签页，显示对应的内容

<ul>
  <li>Lorem.</li>
  <li>Magni.</li>
  <li>Nihil.</li>
  <li>Id?</li>
  <li>Ipsa!</li>
  <li>Earum?</li>
  <li>Laboriosam.</li>
  <li>Voluptatum?</li>
  <li>Veniam.</li>
  <li>Aliquid.</li>
</ul>

1. 默认方式 - 遍历所有子元素并绑定事件

let ul = document.querySelector('ul');
let lis = ul.querySelectorAll('li');
lis.forEach(li => {
  li.addEventListener('click', () => {
    console.log(li.innerHTML);
  })
})

.委托：不给直接给元素指定事件，而是给其共同的祖先元素指定事件，通过冒泡机制，根据事件对象 target 确定目标元素

.通常通过标签名 tagName 来判断事件对象；该属性并没有直接显示在事件对象e中

.为了唯一标识当前事件对象，可以在渲染的时候通过 data- 属性和对象绑定

.适合子元素多，且动态变化的情况

2. 事件委托方式 - 给父级元素指定事件，只有 target 是 LI 才响应，即：只有点到了 LI 才响应

let ul = document.querySelector('ul');
ul.addEventListener('click', (e) => {
  console.log(e.target.tagName);
  if(e.target.tagName==='LI'){
    //do
  }
})