javascript事件处理

一、事件处理程序。

1、DOM0级事件处理程序。

    形如 element.onclick = function(){};

    程序的作用域为元素的作用域。

    移除监听， element.onclick = null;

2、DOM2级事件处理程序。

    形如 element.addEventListener("click",function(){},false);

    程序的作用域为元素的作用域。

    第一个参数为事件类型，第二个参数为事件处理程序，第三个参数为true时表示在捕获阶段调用事件处理程序，为false为冒泡阶段。一般为false。

    能够一次添加多个事件处理程序。

    为了能够移除事件处理程序，第二个参数最好不要使用匿名程序。

    移除监听，element.removeElementListener("click",handler,false);

3、IE事件处理程序。

    IE的事件处理程序跟DOM0和DOM2级事件处理程序有几个比较明显的区别。

    形如 element.attachEvent("onclick",handler);

    程序作用域为全局作用域。

    也可添加多个事件处理程序，触发的顺序与添加顺序相反。

    移除监听，element.detachEvent("onclick",handler); 移除规则与DOM2级类似。

二、事件对象。

1、DOM中的事件对象。

    function(event){

        var evt = event;

    }

    事件的目标  event.target;

    事件的类型  event.type;

    事件冒泡处理:

        当event.bubbles = true 时可以调用 event.stoppropagation() 阻止冒泡，也可以阻止事件捕获。

    默认事件处理:

        当event.cancelable = true 时可以调用 event.preventDefault() 阻止默认事件

2、IE中的事件对象。

    在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。即：

    function(){

        var evt = window.event;

    }

    如果是使用IE方法添加事件处理程序，也会有一个event作为参数传入事件处理程序中。但是也可以使用window来访问event对象。

    事件的目标 event.srcElement;

    事件的类型 event.type;

    事件冒泡处理：

    event.cancelBubble = true; IE不支持事件捕获，所以也就没有阻止事件捕获的说法了。

    默认事件处理：

    event.returnVaule = false;

三、跨浏览器事件处理事件。

    综上所述，可以写出一个比较好用的跨浏览器事件处理事件对象。

　　var EventUtil = {

　　　　addHandler: function(element, type, handler){

　　　　　　if(element.addEventListener){

　　　　　　　　element.addEventListener(type,handler,false);

　　　　　　}else if(element.attachEvent){

　　　　　　　　element.attachEvent("on"+type,handler){

　　　　　　}else{

　　　　　　　　element["on"+type] = handler;

　　　　　　}

　　　　},

　　　　getEvent: function(event){

　　　　　　return event ? event : window.event;

　　　　},

　　　　getTarget: function(event){

　　　　　　return event.target || event.srcElement;

　　　　},

　　　　preventDefault: function(event){

　　　　　　if(event.preventDefault)｛

　　　　　　　　event.preventDefault();

　　　　　　}else{

　　　　　　　　event.returnValue = false;

　　　　　　}

　　　　},

　　　　removeHandler: function(element,type,handler){

　　　　　　if(element.removeEventListener){

　　　　　　　　element.removeEventListener(type,handler,false);

　　　　　　}else if(element.detachEvent){

　　　　　　　　element.detachEvent("on"+type,handler);

　　　　　　}else{

　　　　　　　　element["on"+type] = null;

　　　　　　}

　　　　},

　　　　stopPropagation: function(event){

　　　　　　if(event.stopPropagation){

　　　　　　　　event.stopPropagation();

　　　　　　}else{

　　　　　　　　event.cancelBubble = true;

　　　　　　}

　　　　}

};

javascript事件处理,古老的榕树,5-wow.com