浏览器事件机制与自定义事件的实现

最新推荐文章于 2025-07-09 11:59:39 发布

sho_ko

最新推荐文章于 2025-07-09 11:59:39 发布

阅读量129

点赞数

文章标签： javascript xhtml 设计模式 ViewUI

本文详细介绍了DOM事件的不同级别机制，包括0级DOM上的事件和2级DOM事件机制的区别，2级DOM事件模型的注册与删除，事件冒泡模型，如何停止事件的传递，以及自定义事件的实现方法。

一、 0 级 DOM 上的事件和 2 级 DOM 事件机制

0 级 DOM 上的事件又称原始事件模型，所有的浏览器都支持他，而且是通用的。 2 级 DOM 事件机制又为标准事件模型，除了 ie 其他浏览器都支持（ ie9 据说也支持，有待考证）， ie 虽然大部分与标准事件模型一样，但有自己专有的事件模型，因此开发人员要实现标准事件模型必须为 IE 写特定的代码，这给程序员增加了负担。

原始事件模型

Html代码

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>浏览器0级DOM上的事件</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
</head>
<body>
<inputtype="button"value="点击我"id="btn">
</body>
</html>
<scripttype="text/javascript">
<!--
varmethod1=function(){alert(1)};
varmethod2=function(){alert(2)};
varmethod3=function(){alert(3)};
document.getElementById("btn").onclick=method1;
document.getElementById("btn").onclick=method2;
document.getElementById("btn").onclick=method3;
//-->
</script>

以上书写在各浏览器中都是兼容的，但只有 medhot3 被执行，即同一个对象同一类型的事件只能注册一个处理函数，要想实现注册多个处理函数，需要利用 2 级 DOM 事件机制。

Html代码

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>浏览器2级DOM事件机制</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
</head>
<body>
<inputtype="button"value="点击我"id="btn">
</body>
</html>
<scripttype="text/javascript">
<!--
varmethod1=function(){alert(1)};
varmethod2=function(){alert(2)};
varmethod3=function(){alert(3)};
//执行顺序为method1->method2->method3
//标准事件模型
varbtn1Obj=document.getElementById("btn");
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
//执行顺序为method3->method2->method1
//IE事件模型
varbtn1Obj=document.getElementById("btn");
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
//-->
</script>

从运行结果来看， ie 和 firefox 下执行的顺序是不一样的

二、2级DOM事件模型事件的注册与删除

element.addEventListener(eventType,fn,useCapture); // 注册事件

element.removeEventListener(eventType,fn, useCapture);// 删除事件

可以用 addEventListener() 给同一个对象同一类型的事件注册多个处理函数，但是如果在同一元素上多次注册了一个处理函数，那么第一次注册后的所有注册都将被忽略，但删除该注册函数（调用 removeEventListener() ）后可以再重新注册该函数。需要注意的是删除事件， useCapture 的值必须要跟注册时保持一致

Html代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>浏览器事件机制——注册和删除事件</title>
<style>
div{border:1pxsolidblue;}
div#div1{padding:40px;background-color:#aaaaaa;}
div#div2{padding:40px;background-color:#bbbbbb;}
div#div3{padding:40px;background-color:#cccccc;}
</style>
</head>
<body>
<divid="div1"style="width:100px;height:100px;">
我是老大，点击我添加老三的click事件
</div>
<br/>
<divid="div2"style="width:100px;height:110px;">
我是老二，点击我删除老三的click事件
</div>
<br/>
<divid="div3"style="width:100px;height:100px;">
我是老三，是否有click事件，老大老二说了算，呵呵
</div>
<script>
functionclick1(){
alert("Iamdiv1,adddiv3event");
if(window.addEventListener){
div3.addEventListener("click",click3,false);
}elseif(window.attachEvent){
div3.attachEvent("onclick",click3);
}
}
functionclick2(){
alert("Iamdiv2,removediv3event");
if(window.addEventListener){
div3.removeEventListener("click",click3,false);
}elseif(window.attachEvent){
div3.detachEvent("onclick",click3);
}
}
functionclick3(){
alert("Iamdiv3");
}
vardiv1=document.getElementById("div1");
vardiv2=document.getElementById("div2");
vardiv3=document.getElementById("div3");
if(window.addEventListener){
div1.addEventListener("click",click1,false);
div2.addEventListener("click",click2,false);
}elseif(window.attachEvent){
div1.attachEvent("onclick",click1);
div2.attachEvent("onclick",click2);
}
</script>
</body>
</html>

三、2级DOM事件冒泡模型（Bubble Model）

在2级DOM事件模型中，事件传播分三个阶段进行，即捕获阶段（capturing）、目标阶段和冒泡阶段（bubbling）。在捕获阶段，事件从Document对象沿着文档树向下传播给目标节点，如果目标的任何一个祖先（不是目标本身）专门注册了捕获事件句柄，那么在事件传播过程中，就会运行这些句柄，在冒泡阶段，事件将从目标元素向上传播回或气泡回Document对象的文档层次。虽然所有事件都受事件传播的捕获阶段的支配，但并非所有类型的事件都起泡。

在注册事件时，useCapture参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。要在所有三个阶段都侦听事件，需调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。

Html代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>浏览器事件机制——冒泡处理</title>
<style>
div{border:1pxsolidblue;}
div#divGrandpa{padding:40px;background-color:#aaaaaa;}
div#divFather{padding:40px;background-color:#bbbbbb;}
div#divSon{padding:40px;background-color:#cccccc;}
</style>
</head>
<body>
<divid="divGrandpa"style="width:300px;height:200px;">
<divid="divFather"style="width:200px;height:120px;">
<divid="divSon"style="width:100px;height:40px;">
点击我
</div>
</div>
</div>
<script>
functionshowSon(){
alert("Iamson");
}
functionshowFather(){
alert("Iamfather");
}
functionshowGrandpa(){
alert("IamGrandpa");
}
vargrandpa=document.getElementById("divGrandpa");
varfather=document.getElementById("divFather");
varson=document.getElementById("divSon");
if(window.addEventListener){
grandpa.addEventListener("click",showGrandpa,false);
father.addEventListener("click",showFather,false);
son.addEventListener("click",showSon,false);
}elseif(window.attachEvent){
grandpa.attachEvent("onclick",showGrandpa);
father.attachEvent("onclick",showFather);
son.attachEvent("onclick",showSon);
}
</script>
</body>
</html>

从运行结果来看，对于ie，在ie（ie8之前的版本，包括ie8）中当点击son节点时，会分别弹出I am son、I am father和I am Grandpa，即事件最先被底层的结点触发，再逐渐上传，直到最外层的结点，冒泡方式为儿子——>父亲的模式；在Firefox等支持标准事件模型的浏览器中，跟addEventListener的Capture参数有关，当设置为true时，为捕获模式，事件会从最顶层的结点往下传输，即父亲——>儿子的传播模式。当设为false（默认值）时，则会按冒泡模式传递事件。另外由于ie9即支持window.attachEvent，又支持window.addEventListener，所以会根据代码的书写来运行其效果的。

四、如何停止事件的传递

在IE浏览器中可以调用以下代码
event.cancelBubble = true;
在Firefox等遵循W3C规范的浏览器中，可以调用以下代码
e.stopPropagation();

调用以上代码后可以终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点（即不再进一步传播）。
该方法（属性）将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

Html代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>浏览器事件机制——停止事件的进一步传递</title>
<style>
div{border:1pxsolidblue;}
div#divGrandpa{padding:40px;background-color:#aaaaaa;}
div#divFather{padding:40px;background-color:#bbbbbb;}
div#divSon{padding:40px;background-color:#cccccc;}
</style>
</head>
<body>
<divid="divGrandpa"style="width:300px;height:200px;">
<divid="divFather"style="width:200px;height:120px;">
<divid="divSon"style="width:100px;height:40px;">
点击我
</div>
</div>
</div>
<script>
functionshowSon(e){
alert("Iamson");
}
functionshowFather(e){
//IE把event对象作为window对象的一个属性，而W3C把event对象作为处理程序的一个参数
ee=e||event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
alert("Iamfather");
}
functionshowGrandpa(e){
alert("IamGrandpa");
}
vargrandpa=document.getElementById("divGrandpa");
varfather=document.getElementById("divFather");
varson=document.getElementById("divSon");
if(window.addEventListener){
grandpa.addEventListener("click",showGrandpa,false);
father.addEventListener("click",showFather,false);
son.addEventListener("click",showSon,false);
}elseif(window.attachEvent){
grandpa.attachEvent("onclick",showGrandpa);
father.attachEvent("onclick",showFather);
son.attachEvent("onclick",showSon);
}
</script>
</body>
</html>

五、自定义事件

1、不带参数事件处理，也是最简单的事件设计模式

最简单的一种模式是将一个类的方法成员定义为事件，通常是一个空函数，当程序需要处理该事件时，再进行扩充该事件接口。比如：

Js代码

functionClass1(){
//构造函数
}
Class1.prototype={
show:function(){
this.onShow();//触发onShow事件
},
onShow:function(){}//定义事件接口
}
//创建class1实例
varobj=newClass1();
//创建obj的onShow事件处理程序
obj.onShow=function(){
alert('onshowevent');
}
//调用obj的show方法
obj.show();

以上实现，每个事件接口仅能绑定1个事件处理程序

2、给事件处理程序传递参数

Js代码

//将有参数的函数封装为无参数的函数
functioncreateFunction(obj,strFn){
obj=obj||window;
varargs=[];
for(vari=2;i<arguments.length;i++){
args.push(arguments[i]);
}
returnfunction(){
//该语句相当于obj[strFn](args[0],args[1],...);
obj[strFn].apply(obj,args);
}
}
//定义类Class1
functionClass1(){
//构造函数
}
Class1.prototype={
show:function(){
this.onShow();//触发onShow事件
},
onShow:function(){}//定义事件接口
}
//创建class1实例
varobj=newClass1();
//创建obj的onShow事件处理程序
functionobjOnShow(userName){
alert('hello,'+userName);
}
varuserName='xiaowang';
//绑定obj的onShow事件
obj.onShow=createFunction(null,'objOnShow',userName);
//调用obj的show方法
obj.show();

在以上代码中，将变量userName作为参数传递给了objOnShow事件处理程序。事实上，obj.onShow 得到的事件处理程序并不是objOnShow，而是由createFunction返回的一个无参函数

3、自定义事件支持多绑定

Js代码

//定义类Class1
functionClass1(){
//构造函数
}
Class1.prototype={
show:function(){
//如果有事件绑定则循环onshow数组，触发该事件
if(this.onshow){
for(vari=0,len=this.onshow.length;i<len;i++){
this.onshow[i]();//调用事件处理程序
}
}
},
addEventOnShow:function(_eHandler){
this.onshow=this.onshow||[];//用数组存储绑定的事件处理程序引用
this.onshow.push(_eHandler);
}
}
//创建class1实例
varobj=newClass1();
//事件一
functiononShow1(){
alert('event1');
}
//事件二
functiononShow2(){
alert('event2');
}
//绑定事件
obj.addEventOnShow(onShow1);
obj.addEventOnShow(onShow2);
//调用obj的show方法
obj.show();

4、自定义事件支持带参数的多绑定

Js代码

//将有参数的函数封装为无参数的函数
functioncreateFunction(obj,strFn){
obj=obj||window;
varargs=[];
for(vari=2;i<arguments.length;i++){
args.push(arguments[i]);
}
returnfunction(){
//该语句相当于obj[strFn](args[0],args[1],...);
obj[strFn].apply(obj,args);
}
}
//定义类Class1
functionClass1(){
//构造函数
}
Class1.prototype={
show:function(){
//如果有事件绑定则循环onshow数组，触发该事件
if(this.onshow){
for(vari=0,len=this.onshow.length;i<len;i++){
this.onshow[i]();//调用事件处理程序
}
}
},
addEventOnShow:function(_eHandler){
this.onshow=this.onshow||[];//用数组存储绑定的事件处理程序引用
this.onshow.push(_eHandler);
}
}
//创建class1实例
varobj=newClass1();
//创建obj的onShow事件处理程序
functionobjOnShow(userName){
alert('hello,'+userName);
}
//事件一
varuserName1='xiaowang';
varonShow1=createFunction(null,'objOnShow',userName1);
//事件一
varuserName2='xiaoli';
varonShow2=createFunction(null,'objOnShow',userName2);
//绑定事件
obj.addEventOnShow(onShow1);
obj.addEventOnShow(onShow2);
//调用obj的show方法
obj.show();

以上实现把带参数和多绑定结合在一起，还可以增加一个removeEventOnShow来删除已注册的事件。

六、把对象注册为事件句柄

在编写面向对象的JavaScript程序时，如果想用对象作为事件句柄，那么可以使用如下的函数来注册它们：

function registerObjectEventHandler(element,eventtype,listener,captures){
element.addEventListener(eventtype,
function(event) {listener.handleEvent(event);},captures);
}

用这个函数可以把任何对象注册为事件句柄，只要它定义了handleEvent()方法。Firefox（以及其他基于Mozilla代码的浏览器）允许直接把定义了handleEvent()方法的事件监听器对象传递给addEventListener()方法而不是函数引用。对于这些浏览器来说，不需要我们刚才给出的特殊注册函数。

请看下面的例子

Html代码