一、 0 级 DOM 上的事件和 2 级 DOM 事件机制
0 级 DOM 上的事件又称原始事件模型,所有的浏览器都支持他,而且是通用的。 2 级 DOM 事件机制又为标准事件模型,除了 ie 其他浏览器都支持( ie9 据说也支持,有待考证), ie 虽然大部分与标准事件模型一样,但有自己专有的事件模型,因此开发人员要实现标准事件模型必须为 IE 写特定的代码,这给程序员增加了负担。
原始事件模型
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>浏览器0级DOM上的事件</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- </head>
- <body>
- <input type="button" value = "点击我" id = "btn">
- </body>
- </html>
- <script type="text/javascript">
- <!--
- var method1 = function(){alert(1)};
- var method2 = function(){alert(2)};
- var method3 = function(){alert(3)};
- document.getElementById("btn").onclick = method1;
- document.getElementById("btn").onclick = method2;
- document.getElementById("btn").onclick = method3;
- //-->
- </script>
以上书写在各浏览器中都是兼容的,但只有 medhot3 被执行,即同一个对象同一类型的事件只能注册一个处理函数,要想实现注册多个处理函数,需要利用 2 级 DOM 事件机制。
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>浏览器2级DOM事件机制</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- </head>
- <body>
- <input type="button" value = "点击我" id = "btn">
- </body>
- </html>
- <script type="text/javascript">
- <!--
- var method1 = function(){alert(1)};
- var method2 = function(){alert(2)};
- var method3 = function(){alert(3)};
- //执行顺序为method1->method2->method3
- //标准事件模型
- var btn1Obj = document.getElementById("btn");
- btn1Obj.addEventListener("click",method1,false);
- btn1Obj.addEventListener("click",method2,false);
- btn1Obj.addEventListener("click",method3,false);
- //执行顺序为method3->method2->method1
- //IE事件模型
- var btn1Obj = 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 的值必须要跟注册时保持一致
- <!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=utf-8" />
- <title>浏览器事件机制——注册和删除事件</title>
- <style>
- div {border:1px solid blue;}
- div#div1 {padding:40px;background-color:#aaaaaa;}
- div#div2 {padding:40px;background-color:#bbbbbb;}
- div#div3 {padding:40px;background-color:#cccccc;}
- </style>
- </head>
- <body>
- <div id="div1" style="width:100px;height:100px;" >
- 我是老大, 点击我添加老三的click事件
- </div>
- <br/>
- <div id="div2" style="width:100px;height:110px;" >
- 我是老二, 点击我删除老三的click事件
- </div>
- <br/>
- <div id="div3" style="width:100px;height:100px;" >
- 我是老三,是否有click事件,老大老二说了算,呵呵
- </div>
- <script>
- function click1() {
- alert("I am div1,add div3 event");
- if(window.addEventListener){
- div3.addEventListener("click", click3, false);
- }else if (window.attachEvent){
- div3.attachEvent("onclick", click3);
- }
- }
- function click2() {
- alert("I am div2,remove div3 event");
- if(window.addEventListener){
- div3.removeEventListener("click", click3, false);
- }else if (window.attachEvent){
- div3.detachEvent("onclick", click3);
- }
- }
- function click3() {
- alert("I am div3");
- }
- var div1 = document.getElementById("div1");
- var div2 = document.getElementById("div2");
- var div3 = document.getElementById("div3");
- if(window.addEventListener){
- div1.addEventListener("click", click1, false);
- div2.addEventListener("click", click2, false);
- }else if (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。
- <!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=utf-8" />
- <title>浏览器事件机制——冒泡处理</title>
- <style>
- div {border:1px solid blue;}
- div#divGrandpa {padding:40px;background-color:#aaaaaa;}
- div#divFather {padding:40px;background-color:#bbbbbb;}
- div#divSon {padding:40px;background-color:#cccccc;}
- </style>
- </head>
- <body>
- <div id="divGrandpa" style="width:300px;height:200px;" >
- <div id="divFather" style="width:200px;height:120px;" >
- <div id="divSon" style="width:100px;height:40px;" >
- 点击我
- </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, false);
- father.addEventListener("click", showFather, false);
- son.addEventListener("click", showSon, false);
- }else if (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 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。
- <!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=utf-8" />
- <title>浏览器事件机制——停止事件的进一步传递</title>
- <style>
- div {border:1px solid blue;}
- div#divGrandpa {padding:40px;background-color:#aaaaaa;}
- div#divFather {padding:40px;background-color:#bbbbbb;}
- div#divSon {padding:40px;background-color:#cccccc;}
- </style>
- </head>
- <body>
- <div id="divGrandpa" style="width:300px;height:200px;" >
- <div id="divFather" style="width:200px;height:120px;" >
- <div id="divSon" style="width:100px;height:40px;" >
- 点击我
- </div>
- </div>
- </div>
- <script>
- function showSon(e) {
- alert("I am son");
- }
- function showFather(e) {
- //IE把event对象作为window对象的一个属性,而W3C把event对象作为处理程序的一个参数
- ee = e || event;
- if(e.stopPropagation){
- e.stopPropagation();
- }else{
- e.cancelBubble = true;
- }
- alert("I am father");
- }
- function showGrandpa(e) {
- 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, false);
- father.addEventListener("click", showFather, false);
- son.addEventListener("click", showSon, false);
- }else if (window.attachEvent){
- grandpa.attachEvent("onclick", showGrandpa);
- father.attachEvent("onclick", showFather);
- son.attachEvent("onclick", showSon);
- }
- </script>
- </body>
- </html>
五、自定义事件
1、不带参数事件处理,也是最简单的事件设计模式
最简单的一种模式是将一个类的方法成员定义为事件,通常是一个空函数,当程序需要处理该事件时,再进行扩充该事件接口。比如:
- function Class1(){
- //构造函数
- }
- Class1.prototype = {
- show : function(){
- this.onShow();//触发onShow事件
- },
- onShow : function(){}//定义事件接口
- }
- //创建class1实例
- var obj = new Class1();
- //创建obj的onShow事件处理程序
- obj.onShow = function(){
- alert('onshow event');
- }
- //调用obj的show方法
- obj.show();
以上实现,每个事件接口仅能绑定1个事件处理程序
2、给事件处理程序传递参数
- //将有参数的函数封装为无参数的函数
- function createFunction(obj, strFn){
- obj = obj || window;
- var args = [];
- for(var i = 2; i < arguments.length; i++){
- args.push(arguments[i]);
- }
- return function(){
- //该语句相当于obj[strFn](args[0],args[1],...);
- obj[strFn].apply(obj,args);
- }
- }
- //定义类 Class1
- function Class1(){
- //构造函数
- }
- Class1.prototype = {
- show : function(){
- this.onShow();//触发onShow事件
- },
- onShow : function(){}//定义事件接口
- }
- //创建class1实例
- var obj = new Class1();
- //创建obj的onShow事件处理程序
- function objOnShow(userName){
- alert('hello, ' + userName);
- }
- var userName = 'xiaowang';
- //绑定obj的onShow事件
- obj.onShow = createFunction(null,'objOnShow',userName);
- //调用obj的show方法
- obj.show();
在以上代码中,将变量userName作为参数传递给了objOnShow事件处理程序。事实上,obj.onShow 得到的事件处理程序并不是objOnShow,而是由createFunction返回的一个无参函数
3、自定义事件支持多绑定
- //定义类 Class1
- function Class1(){
- //构造函数
- }
- Class1.prototype = {
- show : function(){
- //如果有事件绑定则循环onshow数组,触发该事件
- if(this.onshow){
- for(var i = 0, len = this.onshow.length; i < len; i++){
- this.onshow[i]();//调用事件处理程序
- }
- }
- },
- addEventOnShow : function (_eHandler){
- this.onshow = this.onshow || [];//用数组存储绑定的事件处理程序引用
- this.onshow.push(_eHandler);
- }
- }
- //创建class1实例
- var obj = new Class1();
- //事件一
- function onShow1(){
- alert('event1');
- }
- //事件二
- function onShow2(){
- alert('event2');
- }
- //绑定事件
- obj.addEventOnShow(onShow1);
- obj.addEventOnShow(onShow2);
- //调用obj的show方法
- obj.show();
4、自定义事件支持带参数的多绑定
- //将有参数的函数封装为无参数的函数
- function createFunction(obj, strFn){
- obj = obj || window;
- var args = [];
- for(var i = 2; i < arguments.length; i++){
- args.push(arguments[i]);
- }
- return function(){
- //该语句相当于obj[strFn](args[0],args[1],...);
- obj[strFn].apply(obj,args);
- }
- }
- //定义类 Class1
- function Class1(){
- //构造函数
- }
- Class1.prototype = {
- show : function(){
- //如果有事件绑定则循环onshow数组,触发该事件
- if(this.onshow){
- for(var i = 0, len = this.onshow.length; i < len; i++){
- this.onshow[i]();//调用事件处理程序
- }
- }
- },
- addEventOnShow : function (_eHandler){
- this.onshow = this.onshow || [];//用数组存储绑定的事件处理程序引用
- this.onshow.push(_eHandler);
- }
- }
- //创建class1实例
- var obj = new Class1();
- //创建obj的onShow事件处理程序
- function objOnShow(userName){
- alert('hello, ' + userName);
- }
- //事件一
- var userName1 = 'xiaowang';
- var onShow1 = createFunction(null,'objOnShow',userName1);
- //事件一
- var userName2 = 'xiaoli';
- var onShow2 = 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()方法而不是函数引用。对于这些浏览器来说,不需要我们刚才给出的特殊注册函数。
请看下面的例子
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>把对象注册为事件句柄</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- </head>
- <body>
- <input type="button" value = "点击我" id = "btn">
- </body>
- </html>
- <script type="text/javascript">
- <!--
- var EventHandler = function(){}
- EventHandler.prototype.handleEvent = function(event){
- alert('用对象作为事件句柄,只要实现该对象的方法handleEvent即可');
- alert(event.type);
- }
- var objectHandler = new EventHandler();
- var btn1Obj = document.getElementById("btn");
- if(window.addEventListener){
- btn1Obj.addEventListener("click",objectHandler,false);
- }else if (window.attachEvent){
- //btn1Obj.attachEvent("onclick",objectHandler);//调用失败,说明不支持把对象注册为事件句柄
- //btn1Obj.attachEvent("onclick",objectHandler.handleEvent);
- registerObjectEventHandler(btn1Obj,"onclick",objectHandler);
- }
- /**
- * 对于不支持把对象注册为事件句柄的浏览器,可以调用以下方法来实现
- */
- function registerObjectEventHandler(element,eventtype,listener,captures){
- if(window.addEventListener){
- element.addEventListener(eventtype,
- function(event) {listener.handleEvent(event);},captures);
- }else if (window.attachEvent){
- element.attachEvent(eventtype,
- function(event) {listener.handleEvent(event);});
- }
- }
- //-->
- </script>