术语

• 绑定事件：绑定事件的处理函数
  • 事件是原本就存在的，不需要绑定，其实是在绑定事件触发后的要处理的函数
• 事件 + 事件的反馈 = 前端交互

事件句柄

• 句柄：onclick
• 事件句柄：div.onclick = function() {}

所谓的事件句柄就是一个将元素的特定事件与某个函数关联起来，比如 onclick、onmouseover 等都是事件句柄，它们会指向一个给定的函数，也就是事件发生时要执行的操作。例如：

div.onclick = function() {
	// todo...
}

// 👆🏻 整体叫做 事件句柄，其中 onclick 单独拆出来叫 句柄
// 通常说的 事件句柄的绑定形式 就是上面这种形式

事件源

事件作用在谁身上，谁就是事件源。

比如网页元素中 a 标签有 onclick 事件，当点击 a 发生 onclick 事件时，事件源就是 a 标签。

绑定事件处理函数

1. HTML 中直接绑定 - 内联 / 行内事件监听器

<div onclick="test()" onmouseover="test2()"></div>

2. JS 中获取 DOM 元素后绑定

div.onclick = function() {};

同时绑定多个处理函数，后边的会覆盖前面的

div.onclick = function() { console.log(1); };
div.onclick = function() { console.log(2); };

// 只会打印 2

<div onclick="console.log(1)">点击我</div>
<script>
  div.onclick = function() { console.log(2); };
  
  // 只会打印 2
</script>

3. addEventListener(事件类型, 事件处理函数, useCapture) 事件监听器