您的位置：首页 > Web前端 > JavaScript

【笔记】JS事件模型再复习之笔记

2016-07-26 23:58 453 查看

写在前面：这已经是第四次翻红宝书复习JS事件模型了，之前有记过笔记在笔记本上，但是每次读完书都没有沉下心来写代码实现。最近在跟学长做项目，真的上手才发现很多细节都只记得个大概，于是决定再次阅读，写在博客里。

----------

DOM事件流

事件冒泡：IE的事件流叫做事件冒泡(event bubbling)

所有线代浏览器都支持事件冒泡，IE5.5及更早版本中的时间傲跑会跳过<html>元素（从<body>直接跳到<document>）。IE9, FireFox,Chrome和Safari则将事件冒泡到window对象。

事件捕获：

虽然事件捕获是Netscape Communicator唯一支持的事件流模型，但是IE9, Safari, Chrome, Opera和FireFox目前都支持这种事件流模型，尽管DOM2级时间规范要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。

在DOM事件流中，

1. 捕获阶段：实际的目标在捕获阶段并不会接收到事件。这意味着在捕获阶段，事件从document到目标的父元素就停止了；

2. 处于目标阶段：事件在目标上发生，并在事件处理中被看成冒泡阶段的一部分；

3. 冒泡阶段：事件传播回文档

----------

DOM 0级事件处理程序

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素作用域中进行的，换句话说，程序中的this引用当前元素。

DOM 2级事件处理程序

addEventListener()的第三个参数是一个布尔值，如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。使用该元素添加的事件处理程序也是其依附的元素的作用域中运行。

使用addEventListener()添加的事件处理程序只能用removeEventListener()来移除。移除时传入的参数与添加处理程序时使用的参数相同。这意味着addEventListener()添加的匿名函数将无法移除。

在大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各浏览器，最好只在需要事件到达目标前截获它的时间将事件处理程序添加到捕获阶段。

----------

IE事件处理程序

在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。在attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window。

----------

DOM中的事件对象：event

属性类型明

bubbles Boolean
表明事件是否冒泡。如果为true，则可设置stopPropagation()

cancelable Boolean
表明是否可以取消事件的默认行为。如果为true，则可设置preventDefault()

currentTarget Element
其事件处理程序当前正在处理事件的那个元素

defaultPrevented Boolean
为true表示已经调用了preventDefault()

detail Integer

eventPhase Integer
事件处理程序的阶段：1表示捕获阶段，2表示处于目标，3表示冒泡阶段

preventDefault() Function
取消事件的默认行为

stopImmediatePropagation() Function 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用

stopPropagation() Function
取消事件的进一步冒泡或捕获。

target Element
事件的目标

type String 触发事件的类型

在事件处理程序的内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。

只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁

----------

IE事件对象属性与DOM的对比

IE DOM

cancelBubble stopPropagation()

returnValue preventDefault()

srcElement target

注：cancelBubble只能取消事件冒泡，而stopPropagation()可以取消冒泡和捕获

----------

跨浏览器的事件对象：

EventUtil = {
addEvent : function(elem,type,handler){
if(elem.addEventListener){
elem.addEventListener(type,handler,false);
}else if(elem.attachEvent){
elem.attachEvent("on"+type,handler);
}else{
elem["on"+type] = handler;
}
},

removeEvent :function(elem,type,handler) {
if (elem.removeEventListener) {
elem.removeEventListener(type, handler, false);
} else if (elem.attachEvent) {
elem.detachEvent("on" + type, handler);
} else {
elem["on" + type] = null;
}
},

getEvent : function(event){
return event? event : window.event;
},

getTarget : function(event){
return event.target ? event.target : window.event.srcElement;
},

preventDefault : function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
return false;
},

stopPropagation : function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},

getRelatedTarget : function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
},

getCharCode : function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return evnet.keyCode;
}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 事件模型

相关文章推荐

新的分享

章节导航