js 事件高频总结

添加事件的三种方法

  <button onclick="alert('surprise 0')">click me 0!</button>
  <button id="dom1">click me 1!</button>
  <button id="dom2">click me 2!</button>
  <script>
    const dom1 = document.getElementById('dom1')
    const dom2 = document.getElementById('dom2')
    dom1.onclick = function () {
      alert('surprise 1')
    }
    dom2.addEventListener('click', function () {
      alert('surprise 2')
    })
  </script>

第三种方法可以为同一个元素添加多个事件，按照绑定顺序执行

事件的三个阶段

先捕获到目标再冒泡，冒泡是指子元素上的事件会往上冒泡到父元素，触发父元素的事件

addEventListener第三个参数可以指定是冒泡还是捕获过程中触发事件：
true - 在捕获过程中执行 false - 冒泡过程中执行(默认)

通过以下的一个例子来理解：

<div id="outer">
    <div id="inner">
      <div id="content">click me!</div>
    </div>
  </div>
  <script>
    const outer = document.getElementById('outer')
    const inner = document.getElementById('inner')
    const content = document.getElementById('content')
    outer.addEventListener('click', function () {
      console.log('outer')
    }, true)
    inner.addEventListener('click', function () {
      console.log('inner')
    }, true)
    content.addEventListener('click', function () {
      console.log('content')
    }, true)
  </script>

捕获过程：输出 outer inner content
冒泡过程：输出 content inner outer

阻止冒泡

很多时候我们并不想触发父级元素的事件，可以通过以下方法来阻止事件冒泡

	content.addEventListener('click', function (e) {
      let event = e || window.event
      event.stopPropagation ? event.stopPropagation() : event.cancleBuble = true
      console.log('content')
    })

当点击事件发生时，会向执行函数传递一个默认的事件对象，对标准浏览器用e.stopPropagation()，IE使用e.cancleBuble = true。
这样点击content的时候，就不会触发inner和outer元素上的事件。

事件代理

利用事件冒泡的原理，将子元素的事件代理到父元素上，这样点击子元素时就会触发父元素上定义好的事件。优点：新增子元素时无需单独添加事件。
常用的场景：
1.比如在table上代理所有td的click事件、在ul上代理所有li的click事件
2.有一个按钮是异步生成的，在父元素上绑定事件
例子：

<ul id="my">
    <li id="info">个人信息</li>
    <li id="bill">账单</li>
    <li id="manage">管理</li>
  </ul>
  <script>
    const my = document.getElementById('my')
    my.addEventListener('click', function(e) {
      let event = e || window.event
      let target = event.target || event.srcElement
      console.log(`to ${target.innerHTML}`)
    })
    const newNode = document.createElement('li')
    newNode.innerHTML = '退出'
    newNode.id = 'logout'
    my.appendChild(newNode)
  </script>