事件处理

定义事件

标签事件

<button onclick="handleClick()">Btn</button>

<script>
  const handleClick = function () {
    console.log('btn click')
  }
</script>

onXxx

<button id="btn">btn</button>

<script>
  const btn = document.querySelector('#btn')
  btn.onclick = function () {
    console.log('btn click')
  }
</script>

EventListener

addEventListener 有三种语法形式，如下：

1. addEventListener(type, listener)：默认情况下会在冒泡阶段触发监听器。
2. addEventListener(type, listener, useCapture)：是否在捕获阶段触发监听器，默认为 false。
3. addEventListener(type, listener, options)：支持多个可选参数
   • capture：是否在捕获阶段触发监听器，默认为 false。
   • once：是否只触发一次监听器，默认为 false。
   • passive：是否在监听器中调用 preventDefault，默认为 false。
   • signal：一个 AbortSignal 对象，用于取消监听器。

<button id="btn">btn</button>

<script>
  const btn = document.querySelector('#btn')
  const handleClick = function () {
    console.log('btn click')
  }
  btn.addEventListener('click', handleClick) // 添加事件监听器
  btn.removeEventListener('click', handleClick) // 移除事件监听器
</script>

常见事件

• 加载和卸载事件

  • DOMContentLoaded：在 Document 完全加载并解析后触发，无需等待样式表、图像和子框架完成加载。
  • readystatechange：在 Document 的 readyState 属性发生变化时触发。

• 拖放事件

  • drag：在用户拖动元素或选择的文本时每几百毫秒触发一次。
  • dragend：在拖动操作结束（通过释放鼠标按钮或按下退出键））时触发。
  • dragenter：在拖动的元素或选择的文本进入有效的放置目标时触发。
  • dragleave：在拖动的元素或选择的文本离开有效的放置目标时触发。
  • dragover：在拖动的元素或选择的文本在有效的放置目标时触发（每几百毫秒）。
  • dragstart：在用户开始拖动元素或选择的文本时触发。
  • drop：在元素或选择的文本被放置在有效的放置目标时触发。

• 剪切板事件

  • copy：在用户通过浏览器的用户界面使用复制操作时触发。
  • cut：在用户通过浏览器的用户界面使用剪切操作时触发。
  • paste：在用户通过浏览器的用户界面使用粘贴操作时触发。

• message

• storage

event 事件对象

• event.preventDefault()：阻止默认行为。
• event.stopPropagation()：阻止事件传播。
• event.target：触发事件的对象。
• event.currentTarget：被监听的对象。

提示

event.currentTarget 永远都是指向被监听的对象，而 event.target 会随着使用者触发的对象去改变。

自定义事件

// e 代表触发的事件对象
window.addEventListener(
  'test',
  function (e) {
    if (e.myAttr === 'demo') {
      alert('key值为demo，添加成功！')
    }
  },
  false,
)

// 创建一个事件对象，名字为 test
let hbEventObj = new Event('test')

// 给事件对象添加一个属性，叫做 myAttr
hbEventObj.myAttr = 'demo'

// 触发事件
window.dispatchEvent(hbEventObj)