DOM事件模型&事件委托

什么是DOM事件模型

当一个事件发生在具有父元素的元素上时，浏览器会运行两个不同阶段：捕获阶段和冒泡阶段。 捕获和冒泡是事件流在DOM中的两种不同传播方式。

事件捕获

• 指浏览器从外向内找监听函数。
• 如上图所示，在捕获阶段，由window到事件具体元素td。

事件冒泡

• 指浏览器从内向外找监听函数。
• 如上图所示，在冒泡阶段，由事件具体元素td到window。

捕获和冒泡的先后顺序

• W3C标准中，默认先进行事件捕获再进行事件冒泡（冒泡可被阻止）。
• 特例：当只有一个元素被监听（不考虑父子元素被同时监听），fn分别在捕获阶段和冒泡阶段监听同一事件，用户点击的元素正是开发者监听元素时，谁先监听谁先执行。

事件委托

• 原理：不用给每个子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理触发执行效果，作用到每一个子元素上。
• 作用：注册最少的监听器，实现对DOM节点的所有子元素进行事件群控，从而提升性能，减少内存占用。
• 举个例子：鼠标放在li上时，让任意一个li的背景颜色变灰。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
     ……
    <li>100</li>
</ul>
<script>
$("ul").on("mouseover",function(){
    $(e.target).css("background-color","gray").siblings().css("background-color","white")
})
</script>
// 第一步：给父元素ul绑定事件
// 第二步：监听子元素li冒泡事件
// 第三步：找到是哪个子元素的事件

• 再举个例子:监听动态元素

<div id="div1"> 
   <button id="button1">button</button> 
</div>
<script>
document.addEventListener('click',(e)=> {
    if (e.target.id === 'button1') {
      console.log('button1 clicked')
    }
  })
</script>

点击button打印出