JavaScript事件处理程序(或事件监听器)的详解

负责处理或响应事件而调用的函数被称为 事件处理程序(或 事件监听器)。

事件的名称和事件处理程序的名称都是区分大小写的，所以按照约定必须都全部小写，事件处理程序的名称是在事件的名称前加上 on ，比如 click 事件对应的事件处理程序叫做 onclick，load 事件对应的事件处理程序叫做 onload。

1.HTML事件处理程序(极不推荐)

以 HTML 属性的形式指定事件处理程序，属性的名称为事件处理程序的名称，属性的值是事件处理程序函数的函数体，不是完整的函数声明。

事件处理程序函数的函数体 可被放在行内、内部、外部。

//行内
//如果包含多条JavaScript语句，应该使用分号分隔或使用回车分成多行。
<input type="button" value="Click Me" onclick="console.log(event.type)" />

//输出
"click"

//内部
<input type="button" value="Click Me" onclick="showMessage(event)" />

<script>
  function showMessage(event) {
    console.log(event.type);
  }
</script>

2.DOM0事件处理程序(不推荐)

DOM0 事件处理程序只可以为同一个事件添加一个事件处理程序，即使添加了多个事件处理程序，后面的会覆盖前面的事件处理程序。

//添加事件处理程序
<button id="myBtn'>Click Me</button>

<script>
//返回一个Element对象保存在btn变量里
let btn = document.getElementById("myBtn");
//将一个函数赋值给btn对象的onclick事件处理程序属性
btn.onclick = function(event) {
  console.log(event.type);
};
</script>

//输出
"click"

//移除事件处理程序
btn.onclick = null;

3.DOM2事件处理程序(推荐)

DOM2 Events 为事件处理程序的添加和移除定义了两个方法：addEventListener() 和 removeEventListener()。

addEventListener(type, listener);
//options对象包括capture、once、passive、signal属性。
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

removeEventListener(type, listener);
//options对象只包括capture属性。
//options对象的capture属性和useCapture参数必须与添加时相同。
removeEventListener(type, listener, options);
removeEventListener(type, listener, useCapture);

使用 DOM2 事件处理程序的一个优势就是可以为同一个事件添加多个事件处理程序，后面的不会覆盖前面的事件处理程序，会按照事件处理程序的添加顺序依次执行，但相同参数的事件处理程序只会被执行一次，不会被重复执行。

//添加事件处理程序
<button id="myBtn'>Click Me</button>

<script>
let btn = document.getElementById("myBtn");
btn.addEventListener("click", (event) => {
  console.log(event.type);
}, false);
</script>

//输出
"click"

//移除事件处理程序
btn.removeEventListener("click", (event) => {
  console.log(event.type);
}, false);

4.Event 对象

无论是在 HTML、DOM0 还是在 DOM2 中发生事件时，所有相关信息都会被收集并存储在一个 Event 对象中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型，以及可能与特定事件相关的任何其它数据。

Event 对象是传递给事件处理程序的唯一参数，对象名称可以为任何合法的标识符，但出于可读性，一般对象名称为 event 或 e。

具体示例见以上三个事件处理程序中相关代码。