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

1.概念

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

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

<script>
  function myFunction(event) {
    //事件处理程序函数体
  }
</script>
概念示例
事件类型(又称为 事件名称)"click"
事件目标<button>
事件处理程序属性名onclick
事件处理程序(又称为 事件监听器)myFunction()
事件对象event

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);
参数描述
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);

5.事件(Event)对象

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

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

Event实例属性返回类型描述
cancelable布尔类型查看事件是否可以被取消
defaultPrevented布尔类型查看事件是否已经调用了 preventDefault() 方法
type字符串类型被触发的事件类型
currentTargetEventTarget类型添加事件处理程序的元素
targetEventTarget类型触发事件处理程序的实际元素
eventPhase整数类型表示事件流当前处于哪一个阶段。0 表示没有事件正在被处理。1 表示捕获阶段。2 表示到达阶段。3 表示冒泡阶段。
timeStamp数值类型从时间原点开始到创建事件所经过的毫秒数(千分之一秒)。
Event实例方法返回类型描述
preventDefault()无返回值 或 Undefined类型用于取消事件的默认行为。只有在 cancelable 实例属性为 true 时才可以调用这个方法。

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

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

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

(0)
huoxiaoqiang的头像huoxiaoqiang
上一篇 2023年3月28日
下一篇 2023年6月1日

相关推荐

  • npm exec和npx的区别

    从以上两者的使用方式上,我们很容易可以看出,npm exec 命令后面的内容与 npx 命令后面的内容相同,npx 就是 npm exec 的简写,但在解决包方面还是有一些区别的,如下所示: npm exec 可以使用双连字符(–)标志(flag)来抑制作为选项的包的解决,以达到与 npx 一样的功能。 npx

    JavaScript经验 2021年7月24日
    01.5K0
  • Node.js代码的三种运行方式

    1.node -e或-p命令方式 2.node script.js文件方式 helloworld.js文件代码清单: 启动终端,使用 cd 命令,切换到存放 helloworld.js 文件的目录。执行以下命令: 3.node -i交互方式 node -i 可简写为 node。

    JavaScript经验 2023年2月23日
    06510
  • JavaScript对象简谱(JavaScript Object Notation,JSON)详解

    1.结构(structure) 1.1对象(object) 对象(object)是“键/值”对的无序集合。 一个对象以左花括号 { 开始,然后以右花括号 } 结束。键必须使用双引号字符串,每个键后跟一个冒号 :  ,“键/值”对之间使用逗号 , 分隔。 1.2数组(array) 数组(array)是值的有序集合。 一个…

    JavaScript经验 2023年3月2日
    04310

发表回复

登录后才能评论