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

javascript——事件处理模型（DOM 和 IE）的更多相关文章

  1. 【repost】JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  2. JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  3. JavaScript事件：事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件

    (一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...

  4. JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)

    具有交互性的JavaScript程序使用的是事件驱动的程序设计模型.   目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API ...

  5. javascript系列之DOM(三)---事件

    原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...

  6. JavaScript事件模型及事件代理

    事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模 ...

  7. Javascript事件模型系列（四）我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  8. javascript进阶——分离式DOM脚本编程

    编写分离式(unobstrusive)代码意味着对HTML内容的完全分离:数据来自服务器端,javascript代码用来动态化和交互.这种分离的好处是在不同浏览器之间使用是可以完全降级或升级运行,对于 ...

  9. JavaScript处理HTML DOM

    本来只想好好写一篇博文,最后弄到好像重构一样了,越做越不满意,先这样吧:) HTML DOM - JavaScript处理HTML DOM 获取HTML元素 改变HTML元素 增删HTML元素 添加事 ...

随机推荐

  1. nodejs mysql 操作数据库方法二

    node.js 开发指南 – Node.js 连接 MySQL 并进行数据库操作 通常在NodeJS开发中我们经常涉及到操作数据库,尤其是 MySQL ,作为应用最为广泛的开源数据库则成为我们的首选, ...

  2. Java -- JDBC mysql读写大数据，文本 和 二进制文件

    1. 往mysql中读写字符文本 public class Demo1 { /* 创建数据库 create database LOBTest; use LOBTest; create table te ...

  3. python之Django rest_framework总结

    一.rest api    a.api就是接口         如: - http://www.oldboyedu.com/get_user/                - http://www. ...

  4. Java中使用注释

    在编写程序时,经常需要添加一些注释,用以描述某段代码的作用. 一般来说,对于一份规范的程序源代码而言,注释应该占到源代码的 1/3 以上.因此,注释是程序源代码的重要组成部分,一定要加以重视哦! Ja ...

  5. 一个简单客户端获取IP，国家，城市，省份的代码

    <html><head>  <script src="js/jquery-1.6.2.min.js" type="text/javascri ...

  6. Linux01

    Linux的特点 1.免费的/开源 2.支持多线程./多用户的(这是操作系统性能的重要指标) 3.安全性好 4.对内存和文件管理优越. 1999年,IBM宣布与Redhat公司建立伙伴关系. Linu ...

  7. c#线程中下载文件到本地

    额,太懒了 直接上示例代码... /// <summary> /// 下载文件到本地 2017-05-31 /// </summary> /// <param name= ...

  8. element-ui树结构懒加载

    在实际项目中,往往树结构数据量较大,这时树节点必须懒加载 element-ui树的懒加载: <div style="width:100%;height:420px;overflow: ...

  9. Cheapest Palindrome（区间DP）

    个人心得:动态规划真的是够烦人的,这题好不容易写出了转移方程,结果超时,然后看题解,为什么这些题目都是这样一步一步的 递推,在我看来就是懵逼的状态,还有那个背包也是,硬是从最大的V一直到0,而这个就是 ...

  10. [BZOJ5248][多省联测2018]双木棋chess

    bzoj luogu sol 首先,要保证一个格子的左边和上方都放满了棋子,就需要这个点的左上方那个矩形都放满了棋子. 这样放棋子状态就会是一个自左下至右上的轮廓线. 状态数?\(C_{20}^{10 ...