Event Handler 事件处理程序 1 ---《高程3》

WalkerXu 发布于2019-08-20 11:31 / 1111人阅读

摘要：为属性赋值匿名函数事件作用域使用级方法指定的事件处理程序被认为是元素的方法。最后这个布尔值参数如果是，表示在捕获阶段调用事件处理程序如果是，表示在冒泡阶段调用事件处理程序。

事件捕获和事件冒泡

“DOM2级事件”规定的事件流包括三个阶段：事件捕获、处于目标阶段和事件冒泡。首先发生的是事件捕获，从外部节点到内部节点依次遍历，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，从目标元素逐层冒泡到外部元素，可以在这个阶段对事件做出响应。IE9、 Opera、 Firefox、 Chrome 和 Safari 都支持 DOM 事件流； IE8 及更早版本不支持 DOM 事件流。

Event Handler 的常见用法

事件处理程序名称是事件名称前加on，如onclick、onload. 为事件指定事件处理程序的方法包括：

1）HTML事件处理程序：

通过HTML元素的特性指定：

最大缺点：HTML和JavaScript紧密耦合，不建议采用。

2）DOM0级事件处理程序：

通过 JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。首先必须取得一个要操作的对象的引用。每个元素（包括 window 和 document）都有自己的事件处理程序属性，这些属性通常全部小写，例如 onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序。

var btn = document.getElementById("myBtn");
//为属性赋值匿名函数
btn.onclick = function(){
alert("Clicked");
};

事件作用域：使用 DOM0 级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行；换句话说，程序中的 this 引用当前元素。
移除方式：删除通过 DOM0 级方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设置为 null 即可：

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

还记得怎么删除对象实例属性吗？使用delete算符，删除后实例属性就没了，但是原型属性还在。
缺点：同一个事件添加两个事件处理程序会导致后一个覆盖前一个。原因在于一个事件处理程序就是一个属性，为一个属性赋两个值，后一个会覆盖前一个。

3）DOM2 级事件处理程序

“ DOM2 级事件” 定义了两个方法，用于处理绑定和删除事件处理程序的操作：
addEventListener()和 removeEventListener()。
所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数：要处理的事件名（不带on）、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。

/*为一个按钮添加了 onclick 事件处理程序，而且该事件会在冒泡阶段被触发*/
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);

事件作用域：与 DOM0 级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行。使用 DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序，多事件处理程序会按照添加它们的顺序触发。IE9、 Firefox、 Safari、 Chrome 和 Opera 支持 DOM2 级事件处理程序，对IE8及以下版本有专用事件处理程序。
移除方式：通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过 addEventListener()添加的匿名函数将无法通过removeEventListener()移除，这是因为匿名函数每次出现都是一次调用，命名函数每次出现是一次引用。因此建议使用命名函数作为eventhandler的函数参数。
大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段（最后一个参数是false），这样可以最大限度地兼容各种浏览器，jQuery和React使用冒泡机制，解决了兼容性问题。

4）IE事件处理程序（非标准方法）

IE 实现了与 DOM 中类似的两个方法： attachEvent()和 detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于 IE8 及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段（DOM2标准建议采用冒泡阶段，但是也可以采用捕获阶段）。

var btn = document.getElementById("myBtn"); //取得DOM元素
btn.attachEvent("onclick", function(){   //注意使用了带on的事件名和匿名函数
alert("Clicked");
});

注意：(a) attachEvent()的第一个参数是"onclick"，而非 DOM 的 addEventListener()方法中的"click"。(b) 在使用 attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此 this 等于 window。在使用 DOM0 和DOM2标准方法的情况下，事件处理程序会在其所属元素的作用域内运行。（c）默认添加在在冒泡阶段。(d)可以添加多个事件处理程序，多个事件处理程序的执行顺序和DOM2 相反，也就是和添加顺序相反。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert(this === window); //true
});

移除：使用 attachEvent()添加的事件可以通过 detachEvent()来移除，条件是必须提供相同的参数。与 DOM 方法一样，这也意味着添加的匿名函数将不能被移除。不过，只要能够将对相同命名函数的引用传给 detachEvent()，就可以移除相应的事件处理程序。

5) 跨浏览器的事件处理程序

可以通过能够隔离浏览器差异的JavaScript库或者创建兼容各大浏览器差异的事件处理方法，库使用可以参照jQuery，这里不介绍。兼容各大浏览器差异的事件处理方法包括addHandler()和removeHandler()，都属于EvenUtil对象，接收相同的参数：要操作的元素、事件名称、事件处理程序函数。

这两个方法首先都会检测传入的元素中是否存在 DOM2 级方法。如果存在 DOM2 级方法，则使用该方法：传入事件类型、事件处理程序函数和第三个参数 false（表示冒泡阶段）。如果存在的是 IE 的方法，则采取第二种方案。注意，为了在 IE8 及更早版本中运行，此时的事件类型必须加上"on"前缀。最后一种可能就是使用 DOM0 级方法（在现代浏览器中，应该不会执行这里的代码）。此时，我们使用的是方括号语法来将属性名指定为事件处理程序（add），或者将属性设置为 null(remove)。
使用方法如下：

云服务器 GPU云服务器事件处理程序 js事件处理程序 event事件 js 待处理事件

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

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

Javascript之事件(一)

摘要：事件流事件流描述的是页面接收事件的顺序的事件流是冒泡流而的事件流是事件捕获流事件冒泡是指事件开始时由最具体的元素，然后向上传播到较为不具体的节点所有现代浏览器都支持事件冒泡则将事件一直冒泡到对象事件捕获是不太具体的节点应该更早接收到事件而具事件流事件流描述的是页面接收事件的顺序.IE的事件流是冒泡流,而 Netscape Communicator的事件流是事件捕获流. 事件冒泡是指...

?xiaoxiao, 2019-08-22 10:58 评论0 收藏0
Javascript自定义事件

摘要：事件定义事件是与交互的最常见的方式但它也可以用于非代码中通过实现自定义事件实现自定义事件的原理是创建一个管理事件的对象如下代码是事件的定义存储事件处理程序由个键值对组成键表示事件名值是一个由事件处理程序组成的数组添加事件触发事件将传递给事件定义事件是与DOM交互的最常见的方式,但它也可以用于非DOM代码中--通过实现自定义事件.实现自定义事件的原理是创建一个管理事件的对象.如下代码...

Leck1e 2019-08-21 10:40 评论0 收藏0
jQuery源码解析之jQuery.event.dispatch()

摘要：一起源方法最终是用绑定事件的而方法正是等于二作用触发绑定的事件的处理程序源码源码行即原生触发事件的处理程序修正对象获取事件的处理程序集合，结构如下从数据缓存中获取事件处理集合即目标元素委托目标这段代码压根不会执行，因为全局搜索没找到结构 showImg(https://segmentfault.com/img/remote/1460000019464031); 一、起源jQuery.e...

GraphQuery 2019-08-23 18:05 评论0 收藏0
20170808 - 跨浏览器的事件兼容处理程序

摘要：第三个参数表示在冒泡阶段调用事件处理程序，默认值为中的事件对象事件处理程序当前程序绑定的那个元素事件处理程序内部，的值始终等于的值事件发生的具体元素事件类型取消事件的默认行为取消事件的进一步捕获或冒泡中的事件对象事件类型阻止事件进一步冒泡取 var EventUtil = { addHandler: function(element, type, handler){ if(...

1treeS 2019-08-20 18:36 评论0 收藏0
jQuery之事件绑定到触发全过程及知识点补充

摘要：十的触发机制被点击了元素本身绑定了一个事件，但是是原生事件，它是靠绑定来触发事件的。 showImg(https://segmentfault.com/img/remote/1460000019505402); 前言：最重要的还是最后的流程图，可以试着根据流程图手写实现$().on()，下篇文章会放出模拟实现的代码。一、举例这是A 这是C ...

Jioby 2019-08-23 18:10 评论0 收藏0