标准事件模型和IE事件模型

前言：在上一篇博客中总结了0级DOM事件模型和2级DOM事件模型，打铁趁热就在谈谈标准事件模型和IE事件模型的区别吧。

一. 标准事件模型

在JavaScript中把标准事件模型的执行分为三个阶段，即捕获阶段->目标阶段->冒泡阶段。在事件的传播过程中，事件先沿着document节点，一层一层的传播，知道遇到注册事件的目标节点，元素注册的事件函数开始运行，运行完毕则由沿着DOM树向上层传播，回到document节点则事件结束。事件流为：document->html->head->body->…->目标元素->…->body->head->document;

在标准事件模型中，事件的注册方式如下：

<button id="btn">点我</button>
<script type="text/javascript">var target = document.getElementById("btn");target.addEventListener('click',function(){alert("我是button");
}, true);</script>

与之对应的removeEventListener() 用来移除事件;
可以使用Event的event对象的stopPropagation()方法来阻止事件冒泡；
以及使用preventDefault() 函数阻止元素的默认事件的执行，比如<a> 标签的链接跳转，submit的默认表单提交等。

二. IE事件模型

一直觉得IE是个大麻烦，和其他的浏览器好多方法不兼容，当然在事件的处理这里也不一样了。

IE的事件机制没有捕获阶段，事件流是非标准的，只有目标阶段和冒泡阶段。

IE事件模型，事件注册方式：

<button id="btn">点我</button>
<script type="text/javascript">var target = document.getElementById("btn");target.attachEvent('onclick',function(){alert("我是button");
});</script>

与之对应的也有事件的移除函数：detachEvent() ；
同样也有阻止事件冒泡的方法：首先获得event对象，e = window.event（可见IE中的event对象是个全局属性)，然后设置event的cancelBubble属性为true即可e.cancelBubble = true;；
阻止默认事件发生：先也是获得event对象，设置returnValue属性为false即可，e.returnValue = false;

三. 区别补充

（1）由于IE不支持事件捕获，所以在注册函数中只有两个参数，类型和处理函数；

（2）标准事件模型中，注册函数时，事件类型前不加on，IE中要加on；

（3）attachEvent注册的函数作为全局调用函数，而不是文档元素的方法，因此this引用的是window对象；

（4）标准事件模型和IE事件模型都允许对同一元素，针对同一事件类型注册多个处理函数。但在标准事件模型中若注册同一函数，与之同名的函数都会被忽略，以第一个为准；在IE中，同一函数可以被注册多次，即发生次数等于注册次数。

标准事件模型和IE事件模型相关推荐

标准盒模型和 IE 盒模型
对于标准盒模型和 IE 盒模型你了解多少? 盒模型讲解我们今天只会提到标准盒模型,和 IE 盒模型,两种盒模型模式讲解.首先来看标准盒模型. 只要是盒模型都会有这四个属性 margin, bord ...
Css盒模型有哪几部分，标准盒模型和IE盒模型有哪些区别
首先介绍Css的盒模型也就是标准盒模型(BOX Model) 包含了内容(content) 内边距(padding) 边框(border) 外边框(margin) 这是大家经常用到的,也是现在的标准 ...
前端面试题 | 标准盒模型和IE盒模型的区别？
两者的区别在于content的不同,IE盒模型的content包含border,padding W3C盒子模型(又称之为标准盒模型)的范围包括margin.border.padding.content ...
详解OSI七层模型和TCP/IP模型
详解OSI七层模型 1. 详解OSI七层模型 1.1 详解每层结构 1.2 交换机和路由器的区别 1.3 集线器与路由器在功能上有什么不同 2. 详解TCP/IP模型 2.1 详解每层结构 2.2 O ...
OSI 七层模型和TCP/IP模型及对应协议
OSI 七层模型和TCP/IP模型及对应协议图: 完成中继功能的节点通常称为中继系统.在OSI七层模型中,处于不同层的中继系统具有不同的名称. 一个设备工作在哪一层,关键看它工作时利用哪一层的数据头部 ...
李奎元：说说那些征信模型（Z计分模型、巴萨利模型和A值模型）
李奎元称:根据企业信用管理理论,5C原则是指考察客户信用价值的5个因素,即品行(character).能力(capacity).资本(capital).担保品(collateral)和环境状况(con ...
OSI 七层模型和TCP/IP模型及对应协议（详解）
OSI 七层模型和TCP/IP模型及对应协议(详解) 查看全文 http://www.taodudu.cc/news/show-6185847.html 相关文章: OSI7层网络模型协议精析 OSI ...
OSI模型和TCP/IP模型
OSI模型开放式系统互联通信参考模型(英语:Open System Interconnection Reference Model,缩写为 OSI),简称为OSI模型(OSI model),一种概念 ...
移除元素所有事件监听_DOM 事件模型或 DOM 事件机制
DOM 事件模型 DOM 的事件操作(监听和触发),都定义在EventTarget接口.所有节点对象都部署了这个接口,其他一些需要事件通信的浏览器内置对象(比如,XMLHttpRequest.Audi ...

标准事件模型和IE事件模型

标准事件模型和IE事件模型相关推荐

最新文章

热门文章