JavaScript中的事件模型详解

jackyin5918

浏览: 307980 次

最近访客更多访客>>

ybfjavaeye

sun80264629

xiaole0226

lmdheart

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端
Javasript-Core

JavaScript 事件模型事件冒泡事件捕获

1.javascript中为元素添加事件处理程序的方法

有以下几种方式,可以为javascript元素添加事件处理程序

(1) 直接将事件处理代码写在html中

(2) 定义一个函数，赋值给html元素的onXXX属性

(3) 使用element.onXXX方式

以上三种方式,请看下面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"    />
<title>添加事件的方法</title>
<style>
     div {border:1px  solid blue;margin:10px;}
     div#divGrandpa {padding:10px;background-color:#aaaaaa;}
     div#divFather {padding:10px;background-color:#bbbbbb;}
     div#divSon {padding:10px;background-color:#cccccc;}
</style>



</head>
 <body>
<div id="divGrandpa" style="width:500px;height:20px;" onclick="alert('直接将事件处理代码写在html中');">(1) 直接将事件处理代码写在html中 </div>

<div id="divFather" style="width:500px;height:20px;" onclick="clk()" >(2) 定义一个函数，赋值给html元素的onXXX属性 </div>

<div id="divSon" style="width:500px;height:20px;" >(3) 使用element.onXXX方式 </div>

</div>

</body>
<script>
 function clk()
 {
  alert('定义一个函数，赋值给html元素的onXXX属性'); 
 }
 
 function clk1()
 {
  alert('使用element.onXXX方式'); 
 }
 
 var clkEle = document.getElementById('divSon'); 
 //这种方式,必须将本行代码放到上面的html代码<div id="divSon" ...>后面,
 //否则导致找不到divSon,返回null
 clkEle.onclick = clk1;
</script>
</html>

(4) 使用addEventListener或attachEvent

这是目前推荐的方式，较前两种方式功能更为强大，可以为元素添加多个事件handler，

支持事件冒泡或捕获，前三种方式默认都是冒泡。

IE6/7/8仍然没有遵循标准而使用了自己专有的attachEvent，且不支持事件捕获。

注意attachEvent的第一个参数需要加上个"on"，比如click事件时,传递参数需要是on+click=onclick

addEventListener第三个参数为false表示事件冒泡，true

attachEvent没有第三个参数，默认就是冒泡，没有捕获。

这种方式代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"    />
<title>浏览器事件机制——冒泡处理</title>
<style>
     div {border:1px  solid blue;}
     div#divGrandpa {padding:40px;background-color:#f00;}
     div#divFather {padding:40px;background-color:#0f0;}
     div#divSon {padding:40px;background-color:#00f;}
</style>
</head>
 <body>
<div id="divGrandpa" style="width:300px;height:200px;" > I am Grandpa
       <div id="divFather" style="width:200px;height:120px;" > I am father
            <div id="divSon" style="width:100px;height:40px;" >
				点击我 I am son
            </div>
       </div>
</div>
<script>
    function showSon() 
    {
        alert("I am son");
    }
    
    function showFather() 
    {
        alert("I am father");
    }
    
    function showGrandpa() 
    {
        alert("I am Grandpa");
    }
    
    var grandpa = document.getElementById("divGrandpa");
    var father = document.getElementById("divFather");
    var son = document.getElementById("divSon");
    
    if(window.addEventListener)
    {
        grandpa.addEventListener("click", showGrandpa, true);
        father.addEventListener("click", showFather, true);
        son.addEventListener("click", showSon, true);
    }
    else if (window.attachEvent)
    {
        grandpa.attachEvent("onclick", showGrandpa);
        father.attachEvent("onclick", showFather);
        son.attachEvent("onclick", showSon);
    }
</script>    
</body>
</html>

2. 事件模型与事件传播

javascript的事件模型可以分为2个级别DOM0,DOM1,DOM2

(参考:http://www.trans4fun.org/2011/12/%E3%80%90javascript%E4%BA%8B%E4%BB%B6%E7%B3%BB%E5%88%97%E3%80%91dom%E4%BA%8B%E4%BB%B6%E6%9C%BA%E5%88%B6%E7%AE%80%E6%98%8E%E6%95%99%E7%A8%8B/)

注:这里DOM1级别的似乎有误,没有DOM1级别事件.

注:似乎有DOM3了,但是貌似跟事件关系不大,可参考http://blog.sina.com.cn/s/blog_825442790101354v.html

前面说的添加时间处理程序方式(1)(2)(3)中处理方式就是DOM0级别的,

方式(3)的好处是将JavaScript和HTML分离开来。

它通过给HTML元素设置一个属性，该属性是一个回调函数来实现事件的注册。

然而，这种方式给一个元素的同一事件只允许一个处理器。

方式(4)是DOM级别2,对于DOM级别2的事件最大的好处就是一个事件可以注册许多处理器。

不仅如此，你还可以指定处理器是在捕获阶段还是冒泡阶段被触发（

通过设置”addEventListener()”函数的第三个参数来指定 – true表示在捕获阶段，false表示在冒泡阶段）

(注:没有DOM1级的事件:DOM级别1于1998年10月1日成为W3C推荐标准。

1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。

参考:http://blog.ueder.info/333.html)

事件传播的过程详解:

(1)DOM0级的事件模型中,浏览器把时间分派给发生事件的文档元素,那个对象具有适合的时间句柄,就运行这个句柄.

除此之外,不用执行其他操作.(摘自JavaScript权威指南,犀牛书第5版400页.)

实际测试发现,DOM0级别的方式定义的事件,默认是冒泡的.

比如下面的代码:

在div标签的onclick的onclick属性中指定事件处理函数.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"    />
<title>浏览器事件机制——冒泡处理</title>
<style>
     div {border:1px  solid blue;}
     div#divGrandpa {padding:40px;background-color:#f00;}
     div#divFather {padding:40px;background-color:#0f0;}
     div#divSon {padding:40px;background-color:#00f;}
</style>
</head>
 <body>
<div id="divGrandpa" style="width:300px;height:200px;" onclick="showGrandpa();" > I am Grandpa
       <div id="divFather" style="width:200px;height:120px;" onclick="showFather();"> I am father
            <div id="divSon" style="width:100px;height:40px;" onclick="showSon();" >
				点击我 I am son
            </div>
       </div>
</div>
<script>
    function showSon() 
    {
        alert("I am son");
    }
    
    function showFather() 
    {
        alert("I am father");
    }
    
    function showGrandpa() 
    {
        alert("I am Grandpa");
    }
</script>    
</body>
</html>

界面显示如下图:

当点击蓝色部分(son)时,依次触发son,father,grandpa的div的onclick事件,

可见这个事件传播过程中,事件对象是向上冒泡的.

这个过程可分解为:

鼠标单击 -> 浏览器生成单击事件 -> 浏览器把单击事件分派给son(div) -> div(son)执行单击处理函数 ->

事件对象往上传播(即往document对象传播,往body标签方向传播) -> 传播到 father,执行father的click事件处理函数 ->

事件对象传播到grandpa,执行grandpa的click事件处理函数.

(2)DOM2级的事件模型中,事件的传播分三个阶段:

a.事件捕捉阶段,事件对象沿着document一直传播到发生事件的那个对象(即文档的目标节点,比如id为son的div),这个过程叫事件捕获.

b.事件到达目标节点,如果目标节点指定了事件处理函数,则执行这个函数

c.事件自目标节点向上,沿着a相反的方向再次传播到document对象,这个过程叫做事件冒泡.

使用addEventListener或attachEvent方式注册的事件处理函数,就是这种DOM2级的事件处理函数.

这里有两个函数是因为addEventListener是标准浏览器中的函数,而attachEvent是IE专用的,不是标准浏览器函数.

使用addEventListener方式注册事件处理函数后,

在事件传播过程中的a,b,c三个阶段中经过的节点都有可能执行该节点注册的事件处理函数,比如在过程a中,对于单击事件来说,

如果目标节点的任何一个祖先节点注册了单击事件处理函数,则在过程a中就有机会执行这个祖先节点的

单击事件处理函数.

addEventListener函数调用方式如下:

grandpa.addEventListener("click", showGrandpa, true);第一个参数是事件名称,第二个参数是事件处理函数名,

第三个参数为true表示在事件捕获阶段可以执行这个事件处理函数,为false表示不在事件捕获阶段执行该事件处理函数,

而是在事件冒泡阶段执行时间处理函数(这也是默认的方式,DOM0级别事件处理方式)

因为第三个参数要么为true要么为false,所以使用addEventListener注册的事件处理函数要么在捕获阶段执行(第三个参数=true),

要么在冒泡阶段执行(第三个参数=false),

addEventListener注册的事件处理函数不会同时在捕获和冒泡阶段执行.

attachEvent方式注册事件处理函数,是IE专用的,非标准.事件传播过程只有b和c,即没有事件捕获过程.

因为attachEvent注册的事件处理函数只在冒泡阶段执行,所以这个函数没有第三个参数.

调用方式为:grandpa.attachEvent("onclick", showGrandpa);

需要注意的是,第一个参数,需要在事件名称前面加上on.

3. 事件对象

在执行监听函数时，会传入一个event对象，其实有一些常用的属性我们会经常用到：

type:

发生事件的类型，如click , mouseover, mouseout等

target：

发生事件的节点可能与currentTarget不同

currentTarget:

正在处理事件的节点，如果在capturing阶段和冒泡阶段处理事件，这个属性就与target属性不同。在事件监听函数中应该用这个属性而不是this

stopPropagation():

可以阻止事件从当前正在处理他的节点传播

preventDefault():

阻止浏览器执行与事件相关的默认动作，与0级DOM中返回false一样

clientX, clientY:

鼠标相对于浏览器的x坐标y坐标

screenX, screenY:

鼠标相对于显示器左上角的x坐标y坐标

IE下的处理方式

IE下没有addEventListener，但是有自己类似的方法：attachEvent，这个方法只有两个参数，第一个参数为事件类型的前面需要加”on”，由于 ie下没有捕获，所以没有类似标准浏览器的第三个参数。

IE上可以对元素进行多次同样的绑定，标准浏览器只会绑定一次。ie下event对象不是事件处理程序传入的参数，而是全局的变量:window.event，例如中断冒泡用window.event.cancelBubble = true.

event常用属性

type:

兼容DOM的type属性

srcElement:

兼容DOM的target属性

clientX, clientY:

兼容DOM的clientX, clientY属性

cancelBubble:

布尔值，设为true同调用stopPropagation()

returnValue:

布尔值，设为false同调用preventDefault()

卸载方法:

Object.removeEventListener(eventType,handler,useCapture);//DOM标准的事件卸载方式

Object.detachEvent(eventType,handler);//IE内核的事件卸载方式

4 事件传播过程的阻止

浏览器在执行事件处理函数都会传递一个event对象,改event对象有个

stopPropagation()方法可以阻止事件对象的传播(阻止捕获和冒泡).

查看图片附件

分享到：

javascript事件捕获,冒泡,事件传播顺之间 ... | web页面中嵌入window media player,支持IE ...

2013-06-20 18:05
浏览 2642
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论