js：javascript中的事件体系：常见事件、事件监听、事件移除、事件冒泡、事件捕获、事件委托、阻止事件

常见的事件

鼠标事件

键盘事件

Focus events

添加事件监听

方式一：addEventListener()（推荐）

语法

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

参数

options可选值

示例：绑定input获得焦点事件

<input
  type="text"
  id="input-name"
/>

<script>
  let inputName = document.querySelector('#input-name')

  inputName.addEventListener('focus', (event) => {
    console.log(event)
  })
</script>

addEventListener 方式可以在单个事件上添加多个监听器

<button>按钮</button>

<script>
  const btn = document.querySelector('button')

  // 添加多个事件处理器
  btn.addEventListener('click', () => {
    console.log('处理器1')
  })

  btn.addEventListener('click', () => {
    console.log('处理器2')
  })
</script>

方式二：事件处理器属性

示例：为div元素绑定click点击事件

<style>
  #box {
    width: 200px;
    height: 200px;
    background-color: gray;
  }
</style>

<div id="box"></div>

<script>
  let box = document.querySelector('#box')

  box.onclick = (event) => {
    console.log(event)
  }
</script>

事件处理器属性，不能为一个事件添加一个以上的处理程序，因为任何后续尝试都会覆写较早设置的属性

方式三：内联事件处理器（不推荐）

<input
  type="text"
  onfocus="handleFocus()"
/>

<script>
  function handleFocus(event) {
    let e = event || window.event

    console.log(e)
  }
</script>

你永远不应该使用 HTML 事件处理器属性——那些已经过时了，使用它们是不好的做法。

移除监听器

方式一：removeEventListener

<button>按钮</button>

<script>
  function handleButtonClick(event) {
    console.log(event)
  }

  const btn = document.querySelector('button')
  // 添加事件处理器
  btn.addEventListener('click', handleButtonClick)

  // 移除监听器
  btn.removeEventListener('click', handleButtonClick)
</script>

方式二：AbortController

<button>按钮</button>

<script>
  function handleButtonClick(event) {
    console.log(event)
  }

  const controller = new AbortController()

  const btn = document.querySelector('button')

  // 添加事件处理器
  btn.addEventListener('click', handleButtonClick, {
    signal: controller.signal, // 向该处理器传递 AbortSignal
  })

  // 移除任何/所有与该控制器相关的事件处理器
  controller.abort()
</script>

事件的控制

阻止默认行为 preventDefault

表单中只有一个输入框，默认键盘敲下回车就会提交表单，可以阻止这种默认行为

<!-- 表单 -->
<form id="form">
  <input
    type="text"
    id="name"
  />
</form>

<script>
  const form = document.querySelector('#form')
  
  form.addEventListener('submit', (e) => {
    e.preventDefault()
    console.log('submit');
  })
</script>

事件冒泡

当点击button时，外层容器也会接收到click事件

<div id="box">
  <button>点击</button>
</div>

<script>
  const btn = document.querySelector('button')
  const box = document.querySelector('#box')

  btn.addEventListener('click', (e) => {
    console.log('btn click')
  })

  box.addEventListener('click', (e) => {
    console.log('box click')
  })
</script>

输出顺序

btn click
box click

阻止事件冒泡 stopPropagation

使用stopPropagation可以阻止事件继续传播

<div id="box">
  <button>点击</button>
</div>

<script>
  const btn = document.querySelector('button')
  const box = document.querySelector('#box')

  btn.addEventListener('click', (e) => {
    e.stopPropagation() // 阻止冒泡
    console.log('btn click')
  })

  box.addEventListener('click', (e) => {
    console.log('box click')
  })
</script>

事件捕获

<div id="box">
  <button>点击</button>
</div>

<script>
  const btn = document.querySelector('button')
  const box = document.querySelector('#box')

  btn.addEventListener(
    'click',
    (e) => {
      console.log('btn click')
    },
    { capture: true }
  )

  box.addEventListener(
    'click',
    (e) => {
      console.log('box click')
    },
    { capture: true }
  )
</script>

输出（和冒泡顺序相反）

box click
btn click

事件委托

利用事件冒泡可以实现事件委托，简化代码

简单的事件监听

<div id="box">
  <button id="buttonA">点击A</button>
  <button id="buttonB">点击B</button>
</div>

<script>
  const buttonA = document.querySelector('#buttonA')
  const buttonB = document.querySelector('#buttonB')

  buttonA.addEventListener('click', (e) => {
    console.log('buttonA click')
  })

  buttonB.addEventListener('click', (e) => {
    console.log('buttonB click')
  })
</script>

使用事件委托，仅用监听外层元素的事件

<div id="box">
  <button id="buttonA">点击A</button>
  <button id="buttonB">点击B</button>
</div>

<script>
  const box = document.querySelector('#box')

  box.addEventListener('click', (e) => {
    // 事件触发元素 buttonA / buttonB
    console.log(e.target)

    // 获取元素id属性
    let targetId = e.target.getAttribute('id')
    console.log(targetId)

    // 处理元素 box
    console.log(e.currentTarget)
  })
</script>