javascript——事件处理模型（DOM 和 IE）

javascript的事件处理模型分为 DOM事件处理模型和 IE事件处理模型。

一、DOM事件流模型

DOM事件流分为三个阶段：捕获阶段、目标阶段、冒泡阶段。

  • 捕获阶段：自上而下，由document节点向目标节点传播事件的阶段。
  • 目标阶段：目标节点正在处理处理事件的阶段。
  • 冒泡阶段:自下而上，由目标节点向document节点传播的阶段。

在htm文件编如下代码：

代码示例

 事件流程图解

<html>

　　<head></head>

　　<body>

　　　　<div id="top">

　　　　　　<div id="mid">

　　　　　　　　<div id="bott">单击</div>

　　　　　　</div>

　　　　</div>

　　</body>

</html>

 

注：(1)stopPropagation():在事件流的任意位置，调用该方法可以停止事件的传播过程。

(2)preventDefault():通知浏览器不要执行与事件关联的默认动作。

(3)canBubble=false，当有该项设置时，则只包含捕获阶段和目标阶段。

(4)eventPhase:事件传播的当前阶段。

(5)target:触发此事件的元素（事件的目标节点）。

(6)currentTarget:事件传播过程中流经的所有对象。

二、DOM事件处理函数和对象

1、相关对象

  • currentTarget:在事件流经过的所有节点均在经过时刻是currentTarget对象，
  • EventListener:表示事件处理函数，每一个EventTarget对象均可添加一个或者多个EventListener对象。

2、手动指派事件：由程序触发事件。

步骤：

(1)调用DocumentEvent接口的CreateEvent()创建事件对象；
(2)调用事件对象的initEvent()或者是子接口的初始化事件方法。
(3)调用EventTarget接口的dispatchEvent()触发事件。

示例：

var evt=document.CreateEvent("MouseEvents");　　//创建事件对象
evt.initMouseEvent("click",true,true,Window,0,0,0,0,0,false,false,false,false,0,null);　　//初始化事件方法
document.getElementById("button").dispatchEvent(evt)　　//触发事件

3、事件对象

事件对象作为唯一的参数传给事件处理函数，事件对象包含了DOM事件发生时的相关上下文信息。

Event 接口

interface Event{

　　const unsigned short     //常量

CAPTURING_PHASE=1;　//表示捕获阶段

AT_TARGET=2;　　//目标阶段

BUBBLING_PHASE=3;　　//冒泡阶段

readonly attribute　　//只读属性

DOMString　type;　　//事件类型，如"click"

EventTarget  target;　　//事件的目标对象，触发事件的源 即 事件的目标节点

EventTarget  currentTarget;　　//事件的当前目标对象，在事件传播过程中流经的元素,可能是目标节点对象、冒泡和捕获过程流经的节点对象

unsigned short  eventPhase;　　//事件传播的当前阶段

boolean  bubbles;　　//事件是否是起泡事件类型

boolean  cancelable;　　//(1)指示 preventDefault() 方法是否起作用；可以取消与事件关联的默认动作，则为 true，否则为 fasle

DOMTimeStamp  timeStamp;　　//事件生成的日期和时间。

}

 注：(1)：当 cancelable 为 true 时，preventDefault() 方法取消与事件关联的默认动作；fasle 则表示不能取消与事件关联的默认动作

三、IE事件相关知识

1、事件流阶段：IE 8 及更低版本的浏览器的 事件流只有两个阶段（目标阶段、冒泡阶段）。

2、Event对象：全局属性；不能把Event对象作为参数传递给事件处理程序，只能用window.event或者event来引用Event对象。

四、事件注册与移除——利用标签对象的 onclick 属性

该种方式适用于DOM和 IE 两种均可

1、事件注册

HTML ：

<button id="btn" onclick="alert(123)">CLICK</button>  

<button id="btn2" onclick="eventHandler()">CLICK2</button>  

javascript：

document.getElementById('btn2').onclick = eventHandler;  

2、事件移除

document.getElementById('btn2').onclick = null;  

3、阻止默认行为

利用 onclick 属性绑定事件处理方法的只需要在处理程序中 添加一条语句： return false;

<button id="btn" onclick="alert(123); return false;">

五、事件注册与移除——利用 javascript 方法

1、事件注册

DOM：

格式：addEventListener(type,listener,usecapture)

说明：type:事件类型，字符串，如"click"，此处type是不带 on 的。如 'click'

　　   listener:函数名，事件的处理函数。

　　   usecapture：在哪种阶段触发事件。true：只在捕获阶段触发事件；false：只在冒泡阶段触发事件。

IE： 　　格式：attachEvent(type,listener)；此处type是带 on 。如 'onclick' 　//因 IE8 及低版本不支持捕获阶段，所以没有第三个参数

2、事件移除

DOM：

格式：removeEventListener(type,listener,usecapture)

例：evt.currentTarget.removeEventListener("click",handmethod,evt.eventPhase==Event.CAPTURING_PHASE);

　　注：evt：事件对象；currentTarget:事件的当前目标；eventPhase：事件的所处阶段；Event.CAPTURING_PHASE：表示捕获阶段。

IE：detachEvent(type,listener)　　//因 IE8 及低版本不支持捕获阶段，所以没有第三个参数

3、阻止默认行为

DOM：  首先确保 Event接口对象的 cancelable=true; 再调用 Event接口对象的 preventDefault();

 IE：　　window.even.treturnValue=false

六、MouseEvent对象

　　Event含有两个子接口，分别是UIEvent和MutationEvent，这两个子接口实现了Event的所有方法和属性，而 MouseEvent接口又是UIEvent的子接口，所以实现了UIEvent和Event的所有方法和属性。下面，我们就看看Event、UIEvent和MouseEvent的主要属性和方法。

1、UIEvent

  • view：发生事件的window对象。
  • detail：提供事件的额外信息，对于单击事件、mousedown和mouseup事件都代表的是点击次数。

2.MouseEvent

  • button：一个数字，指明在mousedown、mouseup和单击事件中，鼠标键的状态，和IE中的button属性类似，但是数字代表的意义不一样，0代表左键，1代表中间键，2代表右键。
  • altKey、ctrlKey、shiftKey、metaKey：和IE相同，但是IE没有最后一个。
  • clientX、clientY：和IE的含义相同，相对于包容窗口的左上角生成的。但是在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上 document.body.scrollLeft和document.body.scrollTop。
  • screenX、screenY：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要。
  • relatedTarget：和IE中的fromElement、toElement类似，除了对于mouseover和mouseout有意义外，其他的事件没什么意义
  • offsetX/offsetY：鼠标指针相对于源元素的位置，可以确定单击Image对象的哪个象素。
  • keyCode：返回keydown和keyup事件发生的时候，按键的代码以及keypress事件的Unicode字符。比如event.keyCode=13代表按下了回车键；

七、总结：

1、注册事件

function addEvent(el, type, fn)
{
　　if(el.addEventListener)　　//DOM模型
　　　　el.addEventListener(type, fn, false);
　　else　　//IE模型
　　　　el.attachEvent('on' + type, fn);
}

2、移除事件

function removeEvent(elem, type, fn)
{
　　if (elem.detachEvent)
　　　　elem.detachEvent('on' + type, fn);
　　if (elem.removeEventListener)
　　　　elem.removeEventListener(type, fn, false);
}

3、获取触发源 

function eventHandler(e)
{
　　e = e || window.event;　　//IE、Chrome下是window.event， FF下是e ；//DOM模型通过参数传递获取事件对象，而 IE 通过全局变量 window.event 获取
　　var target = e.target || e.srcElement;　　////DOM模型的触发源为target，而 IE 的为srcElement
}

4、取消事件默认操作

function eventHandler(e)
{
　　e = e || window.event;
　　if (e.preventDefault)
　　　　e.preventDefault();　　//DOM模型
　　else
　　　　e.returnValue = false;　　//IE
}

5、停止事件传播

function stopEventHandler(e)
{
　　e = e || window.event; 　　//DOM模型通过参数传递获取事件对象，而 IE 通过全局变量 window.event 获取
　　if (e.stopPropagation) 　　//DOM模型
　　　　e.stopPropagation();
　　else
　　 e.cancelBubble = true;　　//IE
}

6、 IE与DOM的区别

 

类别 DOM IE
事件的目标节点 target srcElement
事件的当前节点 currentTarget 无
注册事件 addEventListener(type,listener,usecapture) attachEvent(type,listener)
移除事件 removeEventListener(type,listener,usecapture) detachEvent(type,listener)
阻止事件默认行为 Event接口对象的cancelable=true;preventDefault(); window.even.treturnValue=false
停止事件传播 stopPropagation() cancelBubble=true;
事件对象 作为参数传递给处理程序  IE8只能利用 window.even 获取事件对象
事件类型 type  不带 on 如 'click' 带 on 如 'onclick' 
     
     
     
     

 

 参考：http://www.jb51.net/article/31528.htm

   http://www.nowamagic.net/librarys/veda/detail/1304

　　　　　　　　　　　　http://www.jb51.net/article/14296.htm

 

 

posted @ 2014-09-28 14:02  志在天涯  阅读(537)  评论(0)  编辑  收藏  举报