浅谈JS事件处理程序

DOM0级事件处理程序

在标签内之间增加事件处理属性

function hello(){alert('这是一个dom0级事件')};

使用该方法有两个弊端：
1、需要分别为标签赋予onclick属性
2、如果更改了绑定的函数，那么每个标签都需要修改，十分麻烦

DOM0级的另一种方法：直接在javascript代码中给DOM对象赋予onclick方法

document.getElementById('btn1').onclick=function(){
 alert("这是一个dom0级事件");}

DOM2级事件处理程序

DOM2级事件定义了两种方法：addEventListener和removeEventListener，分别实现增加和删除事件处理程序的操作。
这两种方法都接受三个参数：事件类型，事件函数，true/false
其中第三个参数：true代表事件捕获阶段，false代表事件冒泡阶段

 document.getElementById('btn2').addEventListener('click',function(){
     alert("这是一个dom2级事件");
        },false);//注意，这里的第一个参数没有加on

在这里有个坑，当我想要删除事件的时候使用

 document.getElementById('btn2').removeEventListener('click',function(){
     alert("这是一个dom2级事件");
         },false);

当我再次点击按钮的时候仍然会弹出对话框，原因是因为addEventListener和removeEventListener函数里的第二参数以匿名函数的形式存在，即便他们的功能一模一样，但是他们并不是同一个函数。

解决方法就是先将函数赋给一个变量

var handle=function(){alert('这是一个dom2级事件');}
document.getElementById('btn2').addEventListener('click',handle,false);
document.getElementById('btn2').removeEventListener('click',handle,false);

再次点击按钮发现没有弹出对话框。

IE事件处理程序

IE实现了类似的两个方法：attachEvent()和detachEvent()
这两种方法都接受两个参数，其中第一个参数为事件的类型，第二个参数为事件函数，需要注意的是第一个参数需要加on
IE事件并不需要接收第三个true/false参数，因为IE事件流只有事件冒泡没有事件捕获

document.getElementById('btn3').attachEvent("onclick",function(){
alert("这是一个兼容IE的事件");
});

和DOM2级一样，若要删除事件，第二个参数必须是同一个函数。

编写一个跨浏览器的事件处理程序

var eventUntil={
    addEvent:function(element,type,handle)
    {
        if(element.addEventListener)
        {
            element.addEventListener(type,handle,false);
        }
        else if(element.attachEvent)
        {
            element.attachEvent('on'+type,handle);
        }
        else element['on'+type]=handle;
    },
    removeEvent:function(element,type,handle)
    {
        if(element.removeEventListener)
        {
            element.removeEventListener(type,handle,false);
        }
        else if(element.detachEvent)
        {
            element.detachEvent('on'+type,handle);
        }
        else element['on'+type]=null;
    }
        }

在这里创建了一个eventUntil对象，为它提供了两个方法addEvent和removeEvent
在这里有两个地方需要注意：
(1)判断浏览器是否拥有该方法不需要加( )
(2)代码倒数第三行并没有使用"element."的形式，因为需要使用加号去拼接on和type：'on'+type，这样才能正确地向事件处理程序传递onclick这样的事件。使用方括号表示法可以解决属性名中包含会导致语法错误的字符或者属性名使用的是关键字或保留字的问题：element['on'+type]。

var handle=function(){alert('这是一个兼容浏览器的事件');}
eventUntil.addEvent(document.getElementById('btn3'),'click',handle);
eventUntil.removeEvent(document.getElementById('btn3'),'click',handle);

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，包含所有与事件有关的信息。

事件对象比较常用的属性和方法：

type：事件类型
target：事件目标
preventDefault()：取消事件的默认行为，如跳转链接
stopPropagation()：取消事件的进一步捕获或冒泡


跳转

eventUntil.addEvent(document.getElementById('father'),'click',function(){alert('我是父亲')});
eventUntil.addEvent(document.getElementById('son'),'click',function(e){alert('我是儿子');

当点击链接的时候会弹出‘我是儿子’对话框，紧接着又会弹出‘我是父亲’对话框。这是因为当点击链接触发事件后又会向上传播到父层触发父层的事件，这就是事件冒泡。再关比父层弹出的对话框后紧接着页面会跳转到百度，这就是浏览器的默认行为。

IE事件对象

window.event：获取事件
type：事件类型
srcElement：事件目标
returnValue：true(默认值，允许默认行为)/false(取消默认行为)
cancelBubble：true(取消事件冒泡)/false(默认值，允许事件冒泡)

跨浏览器的事件对象

给eventUntil对象新添加如下属性和方法

getEvent:function(event){return event||window.event},
getTarget:function(event){return event.target||event.srcElement;},
stopPro:function(event)
{
        if(event.stopPropagation)//判断是否存在方法不需要加()
        {
            event.stopPropagation();
        }
    else event.cancelBubble=true;
},
preventDe:function(event)
{
        if(event.preventDefault)
        {
            event.preventDefault();
        }
        else event.returnValue=false;//IE
},

再来测试一下

eventUntil.addEvent(document.getElementById('father'),'click',function(){alert('我是父亲')});
eventUntil.addEvent(document.getElementById('son'),'click',function(e){alert('我是儿子');
e=eventUntil.getEvent(e);
eventUntil.stopPro(e);
eventUntil.preventDe(e);

eventUntil.stopPro(e)取消了事件冒泡，因此父层的对话框不会再弹出。
eventUntil.preventDe(e)取消了浏览器的默认行为，因此点击链接后不会跳转。