JS事件模型

JS

事件模型

 

一

.

事件冒泡与事件捕获

 

事件捕获：由外向内寻找事件源的过程。

 

事件冒泡：事件从事件源由内向外传播的过程。

 

 

二

.

指派事件监听者

 

1.

在

JavaScript

中指定事件处理程序，动态指派

 

<p id="inner">

点击

</p> 

<script type="text/javascript"> 

    function tt(){ 

        alert(this.id); 

    } 

    var inner=document.getElementById("inner"); 

    inner.onclick=tt; 

</script> 

 

2.

在

XHTML

标记的事件处理属性中指定，静态指派

 

<p id="inner" onclick="tt()">

点击

</p> 

效果同如下

JavaScript

执行

 

var inner=document.getElementById("inner"); 

inner.onclick=function(){ 

    tt(); 

}; 

两种方式的不同点如下图

 

 

所以动态指派返回

inner

，静态指派返回

undefined 

注意：事件处理程序的返回值可以影响事件的默认行为，默认行为是事件发生，返回一个

f

alse

值可以取消事件的默认行为。

 

所以在静态指派时，

添加

<p id="inner" onclick="return tt()">

点击

</p>

，

才能返回正确

的

boolean

值给

onclick

。

 

 

注意：

== 

内容相等

 === 

类型，内容都相等

 

 

3.

现代事件处理程序指派方法

 

if(obj.attachEvent){ 

    //ie

式

 

    obj.attachEvent("onclick",tt) 

    obj.detachEvent("onclick",tt) 

} 

else{ 

    //dom

式，第三个参数标识处理程序是用在捕获阶段（

true

），还是用在冒泡阶段（

fa

lse

）

 

    obj.addEventListener("click",tt,false); 

    obj.removeEventListener("click",tt,false); 

} 

 

三

.

事件对象

 

if(window.event){ 

    var event=window.event;//ie

式

 

} 

else{ 

    var event=arguments[0];//dom

式

 

} 

 

注