跨浏览器的事件处理程序和跨浏览器的事件对象

       

一、跨浏览器的事件处理程序

 

         事件就是用户或浏览器自身执行的某种动作。例如：click、load，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序以‘on’开头。

        使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。（使用DOM0级方法指定多个事件处理程序时，后面的事件处理程序会覆盖掉前面指定的事件处理程序，也就是最终只会指定最后一个事件处理程序。）

        ‘DOM2级事件’定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

       

         IE事件处理程序：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称和事件处理程序函数。由于IE只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。在使用DOM0级的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window；IE下，用attachEvent()方法指定多个事件处理程序，不是以添加它们的顺序执行，而是以相反的顺序被触发。 

 

 

跨浏览器的事件处理程序：

 

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;
        }
    },
    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;
        }
    }
};

 

 

 

二、跨浏览器的事件对象

 

        在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型，以及其它与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持event对象，但支持方式不同。

        兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用DOM0级或是DOM2级，都会传入event对象。

        在通过HTML特性指定事件处理程序是，变量event中保存着event对象。例：<input type="button" value="" οnclick="alert(event.type)" />。

        event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过，所有事件都会有下表列出的成员。

        

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	表明事件是否冒泡
cancelable	Boolean	只读	表明是否可以取消事件的默认行为
currentTarget	Element	只读	其事件处理程序当前正在处理事件的那个元素
detail	Integer	只读	与事件相关的细节信息
eventPhase	Integer	只读	调用事件处理程序的阶段：1表示捕获阶段， 2表示“处于目标”，3表示冒泡阶段
preventDefault()	Function	只读	取消事件的默认行为。如果cancelable为true， 则可以使用这个方法
stopPropagation()	Function	只读	取消事件的进一步捕获或冒泡。如果bubbles为 true，则可以使用这个方法
target	Element	只读	事件的目标
type	String	只读	被触发的事件的类型
view	AbstractView	只读	与事件关联的抽象视图。等同于发生事件的window对象

        

         在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含时间段额实际目标。如果直接将事件处理程序指定给了目标元素，则this、currentTarget、和target包含相同的值。

        

        与访问DOM中的event对象不同，要访问IE中的event对象有集中不同的方式，取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序是，event对象作为window对象的一个属性存在，即：windo.event。如果事件处理程序是使用attachEvent()添加的，那么就会有一个event对象作为参数被传入事件处理程序函数中，即：event。如果是通过HTML特性指定的事件处理程序，与DOM中的事件模型相同。

        IE的event对象同样也包含着与创建它的事件相关的属性和方法。这些属性和方法也会因为事件类型的不同而不同，但所有事件对象都会包含下表所列的属性和方法。

属性/方法	类型	读/写	说明
cancelBubble	Boolean	读/写	默认为false，但将其设置为true就可以取消事件冒泡
returnValue	Boolean	读/写	默认为true，但将其设置为false就可以取消事件的默认行为
srcElement	Element	只读	事件的目标
type	String	只读	被触发的事件的类型

 

跨浏览器的事件处理程序和跨浏览器的事件对象

 

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;
        }
    },

    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;
        }
    },

    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;
        }
    },    

    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

 

 

 

EventUtil对象待增强。。。

转载于:https://www.cnblogs.com/wolfte/archive/2013/06/05/3120071.html