JavaScript事件处理程序(又称为事件监听器)详解

1.概念

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

//示例
<button onclick="myFunction(event)">点击</button>

<script>
  function myFunction(event) {
    //事件处理程序函数体
  }
</script>

2.HTML事件处理程序

以 HTML 属性的形式指定事件处理程序，HTML 属性名为事件处理程序属性名(即由 on 和 事件名称 组成，比如onclick)，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>

//外部
//index.html文件
<input type="button" value="Click Me" onclick="showMessage(event)" />

//showmessage.js
function showMessage(event) {
  console.log(event.type);
}

3.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;

4.DOM2事件处理程序

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

addEventListener(type, listener);

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

addEventListener(type, listener, useCapture);

removeEventListener(type, listener);

//options对象只包括capture属性，且capture属性必须与添加时相同。
removeEventListener(type, listener, options);

//useCapture参数必须与添加时相同。
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);

5.事件(Event)对象

无论是 HTML、DOM0 还是 DOM2事件处理程序方式发生事件时，所有相关信息都会被收集并存储在一个事件(Event)对象中。

不同的事件生成的事件对象可能包含不同的属性和方法，换句话说，事件对象可能包含与特定事件相关的属性和方法，不过，所有事件对象都会包含下面两张表列出的属性和方法。

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

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