JavaScript 事件——“事件流和事件处理程序”的注意要点

Amio 发布于2019-08-19 17:22 / 3463人阅读

摘要：事件流级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段和事件冒泡阶段。事件处理程序的名字以开头，如等。如使用级方法指定的事件处理程序被认为是元素的方法。

事件流

事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。

事件冒泡

即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。如：




    


    Click

当点击了页面中的div元素，那么这个click事件会按照如下顺序传播：

div元素

body元素

html元素

document对象

事件捕获

事件捕获的思想是最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达目标之前捕获它。

当点击了页面中的div元素，那么这个click事件则会按照如下顺序传播：

document对象

html标签

body标签

div标签

虽然规范要求事件应该从document对象开始传播，但浏览器一般都是从window对象开始捕获事件的。因为老版本浏览器不支持，所以一般都使用事件冒泡。

DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

在DOM事件流中，实际的目标在捕获阶段不会接收事件。就是说在捕获阶段，事件从document到html再到body后就停止了。下一个阶段是“处于目标”阶段，于是事件在div中发生，并在事件处理中被看成是冒泡阶段的一部分。然后，冒泡阶段发生。IE8及更早的版本不支持DOM事件流，浏览器在捕获阶段触发事件对象上的事件，结果就是有两个机会在目标对象上面操作事件。

事件处理程序

事件就是用户或浏览器自身执行的某种动作；事件处理程序（或事件侦听器）就是响应某个事件的函数。事件处理程序的名字以“on”开头，如onload、onclick等。

HTML事件处理程序

若要在按钮被单击时执行一些js代码，可以这样编写：

Click

注意：不能在其中使用未经转义的HTML语法字符。

也可以调用在页面中其他地方定义的脚本：

事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。

这样使用会创建一个封装着的元素属性值的函数。这个函数有一个局部变量event，也就是事件对象：

其中，this值等于事件的目标元素，如：

HTML事件处理程序存在众多问题，所以应该使用js指定的事件处理程序

DOM0级事件处理程序

要使用js指定事件处理程序，首先必须取得一个要操作的对象的引用。

每个元素都有自己的事件处理程序属性，这些属性通常全部小写，如onclick。如：

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行的；也就是this引用当前元素：

以上述这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

删除通过DOM0级方法指定的事件处理程序：

btn.onclick = null;

DOM2级事件处理程序 addEventListener()

该方法接收三个参数：要处理的事件名、事件处理程序函数和布尔值；布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。如：

var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
    console.log(this.id);
})

还可以为该按钮添加多个事件处理程序，如：

var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
    console.log(this.id);
})
btn.addEventListener("click", function () {
    console.log(this.value);
})

removeEventListener()

var btn = document.getElementById("btn");
function info () {
    console.log(this.value);
}
btn.addEventListener("click", info);
btn.addEventListener("click", function () {
    console.log(this.id);
});
btn.addEventListener("click", function valueAndId () {
    console.log(this.value + " " + this.id);
});
btn.removeEventListener("click", info); //有效
btn.removeEventListener("click", function () {
    console.log(this.id);
}); //无效
btn.removeEventListener("click", valueAndId); //报错无效

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样就可以最大限度地兼容各种浏览器。

云服务器 GPU云服务器 javascript的事件云主机的要点深度学习的要点 javascript事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78464.html

《JavaScript高级程序设计》学习笔记：JavaScript中的事件流和事件处理程序

摘要：可以使用侦听器或处理程序来预订事件，以便事件发生时执行相应的代码。响应某个事件的函数称为事件处理程序或事件侦听器。可以删除通过级方法指定的事件处理程序。 JavaScript和HTML之间的交互是通过事件实现的。事件：文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序来预订事件），以便事件发生时执行相应的代码。 1. 事件流事件流：从页面中接收事件的顺序。 ...

Rocko 2019-08-19 17:21 评论0 收藏0
js中的事件流和事件处理程序

摘要：事件流描述的是从页面中接受事件的顺序。事件流中的事件流是事件冒泡流。顺序是从外向里级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段和事件冒泡阶段，其中到是处于目标阶段，如图所示。添加的事件会被逆序执行。 HTML和js之间的交互是通过事件实现的。事件流描述的是从页面中接受事件的顺序。事件流 IE中的事件流是事件冒泡流。顺序是从里向外 eg：div-body-html-...

forsigner 2019-08-22 15:59 评论0 收藏0
[学习笔记] 事件（上篇）

摘要：指定事件处理程序指定事件处理程序主要有两种方式级事件处理程序级事件处理程序。添加事件处理程序注意这里是哦或移除事件处理程序使用移除事件处理程序的条件与方法相同必须提供相同的参数，从而添加的匿名函数也无法被移除。今天看书又看到事件，遂决定小总结一下~ JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器（事件处...

wangym 2019-08-22 10:57 评论0 收藏0
[学习笔记] 事件（上篇）

摘要：指定事件处理程序指定事件处理程序主要有两种方式级事件处理程序级事件处理程序。添加事件处理程序注意这里是哦或移除事件处理程序使用移除事件处理程序的条件与方法相同必须提供相同的参数，从而添加的匿名函数也无法被移除。今天看书又看到事件，遂决定小总结一下~ JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器（事件处...

RayKr 2019-08-01 14:48 评论0 收藏0