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

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

事件的名称和事件处理程序的名称都是区分大小写的,所以按照约定必须都全部小写,事件处理程序的名称是在事件的名称前加上 on ,比如 click 事件对应的事件处理程序叫做 onclickload 事件对应的事件处理程序叫做 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);
参数描述
type事件类型(或称为 事件名称)
listener事件处理程序(或称为 事件监听器)
options有关事件处理程序的特征的对象。可用的属性有:capture、once、passive、signal。
useCapturetrue 表示在捕获阶段调用事件处理程序,false (默认值)表示在冒泡阶段调用事件处理程序。
options对象的属性描述
capture同 useCapture 参数。
oncetrue 表示事件处理程序在触发一次后会被自动移除,false (默认值)表示事件处理程序永远不会被自动移除。
passivetrue 表示事件处理程序永远不会调用 preventDefault() 取消默认行为,false (默认值)反之。
signal一个AbortSignal。当调用给定的 AbortSignal 对象的 abort() 方法时,事件处理程序将被删除。如果未指定,则没有 AbortSignal 与事件处理程序关联。

使用 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 对象是传递给事件处理程序的唯一参数,对象名称可以为任何合法的标识符,但出于可读性,一般对象名称为 evente

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

Event实例属性返回类型描述
cancelable布尔类型查看事件是否可以被取消
defaultPrevented布尔类型查看事件是否已经调用了 preventDefault() 方法
currentTargetEventTarget类型添加事件处理程序的元素
targetEventTarget类型触发事件处理程序的实际元素
type字符串类型被触发的事件类型
Event实例方法返回类型描述
preventDefault()无返回值 或 Undefined类型用于取消事件的默认行为。只有在 cancelable 实例属性为 true 时才可以调用这个方法。

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/experience/javascripte/26373.html

(0)
上一篇 2023年5月4日 21:27
下一篇 1天前

相关推荐

发表回复

登录后才能评论