跨浏览器的事件处理程序和跨浏览器的事件对象
一、跨浏览器的事件处理程序
事件就是用户或浏览器自身执行的某种动作。例如: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="" onclick="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对象待增强。。。