什么是DOM事件？

对DOM元素进行操作的事件
例如点击一个元素，发生了这个动作后，以便进行下一步操作。这个点击就是一个事件。

捕获和冒泡

现代浏览器的事件包含捕获阶段和冒泡阶段。捕获阶段在先，冒泡发生在后。
这里有一个id=div1的元素，其内部包含一个class=div2的元素。

  1. <div id="div1">
  2.     <div id="div2">
  3.         <div id="div3"></div>
  4.     </div>
  5. </div>

那么点击div2时，捕获和冒泡是怎样执行呢？
首先从div1开始了捕获阶段，事件向下走到div2，再走到div3，捕获阶段结束。
然后又从div3开始冒泡阶段，向上走到div2，再走到div1，冒泡阶段结束。

冒泡有时可阻止，捕获永远不可以阻止

冒泡阶段可以用stopPropagation来阻止冒泡

  1. div1.addEventListener('click',()=>{
  2.     e.stopPropagation()
  3. })

这样捕获阶段走完后，就不会继续冒泡了

事件是可以自定义的

自定义写法

  1. button1.addEventListener('click',()=>{
  2.     const event = new CustomEvent('frank',{ //frank事件名
  3.         detail:{name:'frank',age:19}, //这个是事件属性
  4.         bubbles:true, //表示frank事件可以冒泡
  5.         cancelable:false //表示不能阻止冒泡
  6.     })
  7.     button1.dispatchEvent(event)
  8. })
  9. //调用了自己定义的frank事件
  10. button1.addEventListener('frank',(e)=>{
  11.     console.log(e.detail)
  12. })

事件委托

如果有100个按钮，都要有点击事件，怎样用最省的办法实现？事件委托！
利用冒泡，监听div的事件，当点击的是button时，就执行自己的代码。
除了省内存，还可以监听到动态添加的元素。

  1. <div id=“div1”>
  2.     <button></button>
  3.     <button></button>
  4.     ......
  5.     <button></button>
  6.     <button></button>
  7. </div>
  9. div1.addEventListener('click',(e)=>{
  10.     const t = e.target //被操作的元素
  11.     if(t.tagName.toLowerCase() === 'button'){
  12.         console.log('button 被点击了')
  13.     }
  14. })