Js事件传输的机制

最新推荐文章于 2023-02-07 15:46:14 发布

云晴**

最新推荐文章于 2023-02-07 15:46:14 发布

阅读量290

点赞数

本文链接：https://blog.csdn.net/qq_41540945/article/details/88320673

版权

一、介绍
事件是用来实现js和html之间交互的，可以用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（js）与页面的外观（html和css）的松散耦合。事件最早是在IE3和Netscape Navigator2中出现的，当时是作为分担服务器运算负载的一种手段。

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

1、事件冒泡
IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素 (文档中嵌套层次最深的那个节点) 接收，然后逐级向上传播到较为不具体的节点(文档)。比如单击了页面中的<div>元素，那么这个click事件会按照如下顺序逐级向上传播，直至传播到 document 对象。

注意：所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5及更早版本中的事件冒泡会跳过 <html> 元素 (从 <body> 直接跳到 document) 。Firefox、Chrome 和 Safari 则将事件一直冒泡到 window 对象。

2、事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。前面的例子的事件捕获过程为：

3、DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。同样前面的例子触发事件的顺序为：

IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流；IE8及更早版本不支持DOM事件流。

4.事件委托

什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

5.事件委托的代理

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

三、事件处理程序
事件就是用户或浏览器自身执行的某种动作。而响应某个事件的函数就叫做事件处理程序 (或事件侦听器)。事件处理程序的名字以 "on" 开头，比如 click 事件的事件处理程序就是 onclick。为事件指定处理程序的方式有以下几种。

1、HTML事件处理程序
在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本。
<input type="button" value="Click Me" οnclick="alert(this.value)" />
或者
<script type="text/javascript">
function showMessage(){
alert("Hello world!");
}
</script>
<input type="button" value="Click Me" οnclick="showMessage()" />
注意：不能再其中使用未经转义的HTML语法字符，例如和号（&）、双引号（""）、小于号（<）或大于号（>）。

在HTML中指定事件处理程序有三个缺点。1、存在一个时差问题。因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。为此，很多HTML事件处理程序都会被封装在一个try-catch块中，以便错误不会浮出水面。2、这样扩展事件处理程序的作用域在不同浏览器中会导致不同结果。不同js引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错。3、html与js代码紧密耦合，更换事件处理程序改动较大。

2、DOM0级事件处理程序
通过 JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是在第四代Web浏览器中出现的，而且至今仍然为所有现代浏览器所支持。原因一是简单，二是具有跨浏览器的优势。

每个元素都有自己的事件处理程序属性，如onclick等。可以通过js将一个函数赋值给元素的事件处理程序属性。在DOM0事件处理程序中，事件处理程序里的this指向当前元素。

var objlogo=document.getElementById("site_nav_top");
objlogo.οnclick=function(){
alert(this.innerHTML);//代码改变世界
}
删除DOM0事件，只需将事件处理程序的值赋为null即可。
objlogo.οnclick=null;
3、DOM2级事件处理程序
“DOM2级事件”定义了两个方法，addEventListener() 和 removeEventListener()，它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。addEventListener()可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。removeEventListener()不能移除匿名添加的函数。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
var handler = function(){
alert("Hello world!");
};
btn.addEventListener("click", handler, false);
// 这里省略了其他代码
btn.removeEventListener("click", handler, false); // 有效！
以上代码会先显示id，再显示hello world。大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。IE9、Opera、Firefox、Chrome和Safari都支持DOM2级事件处理程序。

4、IE事件处理程序
IE 实现了与DOM中类似的两个方法：attachEvent() 和 detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE只支持事件冒泡，所以通过 attachEvent() 添加的事件处理程序都会被添加到冒泡阶段。

在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用 attachEvent() 方法的情况下，事件处理程序会在全局作用域中运行，因此 this 等于 window 。并且，与DOM 方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。

注意：1、事件名前面有on前缀；2、在事件处理程序的函数中，this不再指向当前元素，而是指向window对象。

var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
btn.attachEvent("onclick", handler);
// 这里省略了其他代码
btn.detachEvent("onclick", handler);
支持IE事件处理程序的浏览器有IE和Opera。

5、跨浏览器的事件处理程序
第一个要创建的方法是 addHandler()，它的职责是视情况分别使用DOM0级方法、DOM2级方法或IE方法来添加事件，它属于一个名叫 EventUtil 的对象。addHandler()方法接受3个参数：要操作的元素、事件名称和事件处理程序函数。EventUtil的用法如下所示：

(1)使用匿名函数

我们为回调函数包裹一层匿名函数。包裹之后，虽然匿名函数的作用域被指向事件触发元素，但执行的内容就像直接调用一样，不会影响其作用域。

(2)使用 bind 方法

使用匿名函数是有缺陷的，每次调用都包裹进匿名函数里面，增加了冗余代码等，此外如果想使用 removeEventListener 解除绑定，还需要再创建一个函数引用。Function 类型提供了 bind 方法，可以为函数绑定作用域，无论函数在哪里调用，都不会改变它的作用域。

四、事件对象
在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。
1、DOM中的事件对象
兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过，所有事件都会有下表列出的成员。

在事件处理程序内部，对象 this 始终等于 currentTarget 的值，而 target 则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则 this 、currentTarget 和 target 包含相同的值。

2、IE中的事件对象
在使用 DOM0 级方法添加事件处理程序时，event 对象作为 window 对象的一个属性存在。如果是通过 HTML 特性指定的事件处理程序，那么还可以通过一个名叫 event 的变量来访问 event 对象 (与 DOM 中的事件模型相同)。IE 的 event 对象同样也包含与创建它的事件相关的属性和方法。

五、内存和性能
1.事件委托
事件委托可以解决页面中事件处理程序过多的问题。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以处理某一类型的所有事件。
EventUtil.addHandler(document.body, 'click', function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch (target.id) {
case 'site_nav_top':
alert('口号');
break;
case 'nav_menu':
alert('点击菜单');
EventUtil.preventDefault(event);
break;
case 'editor_pick_lnk':
alert('推荐区');
EventUtil.preventDefault(event);
break;
}
});
2.移除事件处理程序
如果内存中保留大量无用的事件处理程序，会影响性能。所以一定要在不需要的时候及时移除事件处理程序。尤其注意以下情况：使用innerHTML删除带有事件处理程序的元素时，要先将事件处理程序设置为null。使用委托也可以解决这个问题，不直接将事件加载会被innerHTML替换的元素，而是将事件赋给其父元素，这样就可以避免了。卸载页面时，最好手工清除所有的事件处理程序。

六、DOM中的事件模拟
事件经常由用户操作或通过其他浏览器功能来触发，也可以使用JS在任意时刻来触发特定的事件，而此时的事件就如同浏览器创建的一样。在测试Web应用程序，模拟触发事件是一种极其有用的技术。

1. DOM中的事件
模拟分三步：

    使用document.createEvent()创建event对象。通过赋值不同的参数，可以模拟不同的事件类型
    初始化event对象；
    触发事件，调用dispatchEvent()方法，所有支持事件的DOM节点都可以支持这个方法。

2. 模拟鼠标事件
    首先createEvent()方法传入参数是“MouseEvent”来模拟鼠标事件。返回的event对象有一个initMouseEvent()方法，用来初始化事件信息。该方法有15个参数：
    type(字符串)：要触发的事件类型，比如“click”。
    bubbles(bool)：事件是否冒泡。一般设为true。
    cancelable(bool)：事件是否可以取消。一般设为true。
    view：与事件关联的视图，一般设置为document.defaultView。
    detail(整数)：与事件有关的详细信息，一般设置为0.
    screenX：事件相对于屏幕的X坐标。
    screenY：事件相对于屏幕的Y坐标。
    clientX：事件相对于视口的X坐标。
    clientY：事件相对于视口的Y坐标。
    ctrlKey(bool)：是否俺下了Ctrl键，默认为false。
    altKey：是否按下了alt键，默认false。
    shiftKey：是否按下了shift键，默认false。
    metaKey：是否按下了meta键，默认false.
    button(整数)：按下了哪个鼠标键，默认0。
    relatedTarget：与事件相关的对象，一般为null.只在模拟mouseover和mouseout的时候会用到。

七阻止事件冒泡的方法

. 1.event.stopPropagation();

事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）

2.return false;

事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

云晴**

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js事件传输的机制

一、介绍事件是用来实现js和html之间交互的，可以用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（js）与页面的外观（html和css）的松散耦合。事件最早是在IE3和Netscape Navigator2中出现的，当时是作为分担服务器运算负载的一种手段。二、事件流事件流描述的是从页面中接收事件的...
复制链接

扫一扫