在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息。所有浏览器都支持event对象,但支持方式不同。
DOM中的事件对象
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法(DOM0级或DOM2级),都会传入event对象。来看下面的例子:
var btn=document.getElementById("myBtn"); btn.onclick=function(event){ alert(event.type); }; btn.addEventListener("click",function(event){ alert(event.type); },false);
这个例子中的两个事件处理程序都会弹出一个警告框,显示由event.type属性表示的事件类型。这个属性始终都会包含被触发的事件类型,例如click(与传入addEventListener和removeEventListener()中的事件类型一致)。在通过HTML特性指定事件处理程序时,变量event中保存着event对象。请看下面的例子:
<input type="button" value="Click Me" onclick="alert(event.type)">
以这种方式提供event对象,可以让HTML特性事件处理程序与JavaScript函数执行相同的操作。event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。不过,所有事件都会有下表列出的成员。
属性/方法 | 类型 | 读/写 | 说明 |
---|---|---|---|
bubbles | Boolean | 只读 | 表明事件是否冒泡 |
cancelable | Boolean | 只读 | 表明是否可以取消事件的默认行为 |
currentTarget | Element | 只读 | 其事件处理程序当前正在处理事件的那个元素 |
defaultPrevented | Boolean | 只读 | 为true表示已经调用了preventDefault()。DOM3级事件中新增 |
detail | Integer | 只读 | 与事件相关的细节信息 |
eventPhase | Integer | 只读 | 调用事件处理程序的阶段: 1表示捕获阶段,2表示处于目标,3表示冒泡阶段 |
preventDefault() | Function | 只读 | 取消事件的默认行为。如果cancelable是true,则可以使用这个方法 |
stopImmediatePropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用(DOM3级事件中新增) |
stopPropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡。如果bubbles为true,则可以使用这个方法 |
target | Element | 只读 | 事件的目标 |
trusted | Boolean | 只读 | 为true表示事件是浏览器生成的。 为false表示事件是由开发人员通过JavaScript创建的(DOM3级事件中新增) |
type | String | 只读 | 被触发的事件的类型 |
view | AbstractView | 只读 | 与事件关联的抽象视图。等同于发生事件的window对象 |
在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值。来看下面的例子:
var btn=document.getElementById("myBtn"); btn.onclick=function(event){ alert(event.currentTarget===this); alert(event.target===this); };
这个例子检测了currentTarget和target与this的值。由于click事件的目标是按钮,因此这三个值是相等的。如果事件处理程序存在于按钮的父节点中(例如document.body),那么这些值是不相同的。再看下面的例子:
document.body.onclick=function(event){ LS.log.write(event.currentTarget===document.body); LS.log.write(this===document.body); LS.log.write(event.target===document.getElementById("myBtn")); };
当单击这个例子中的按钮时,this和currentTarget都等于document.body,因为事件处事程序是注册到这个元素上的。然而,target元素却等于按钮元素,因为它是click事件真正的目标。由于按钮上并没有注册事件处理程序,结果click事件就冒泡到了document.body,在那里事件才得到了处理。在需要通过一个函数处理多个事件时,可以使用type属性。例如:
var btn=document.getElementById("myBtn"); var handler=function(event){ switch(event.type){ case "click": LS.log.write("Clicked"); break; case "mouseover": event.target.style.backgroundColor="red"; break; case "mouseout": event.target.style.backgroundColor=""; break; } }; btn.onclick=handler; btn.onmouseover=handler; btn.onmouseout=handler;
这个例子定义了一个名为handler的函数,用于处理3种事件:click、mouseover和mouseout。当单击按钮时,会出现一个与前面例子中一样的警告框。当鼠标移动到按钮上面时,背景颜色应该会变成红色,而当鼠标移动出按钮的范围时,背景颜色应该会恢复为默认值。这里通过检测event.type属性,让函数能够确定发生了什么事件,并执行相应的操作。要阻止特定事件的默认行为,可以使用preventDefault()方法。例如,链接的默认行为就是在被单击时会导航到其href特性指定的URL。如果你想阻止链接导航这一默认行为(延伸阅读:链接被单击时onclick事件属性和锚的默认动作哪个先执行?),那么通过链接的onclick事件处理程序可以取消它,如下面的例子所示:
var link=document.getElementById("myLink"); link.onclick=function(event){ event.preventDefault(); };
只有cancelable属性设置为true的事件,才可以使用preventDefault()来取消其默认行为。另外,stopPropagation()方法用于立即停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡。例如,直接添加到一个按钮的事件处理程序可以调用stopPropagation(),从而避免触发注册在document.body上面的事件处理程序,如下面的例子所示。
var btn=document.getElementById("myBtn"); btn.onclick=function(event){ LS.log.write("Clicked"); event.stopPropagation(); }; document.body.onclick=function(event){ LS.log.write("Body clicked"); };
对于这个例子而言,如果不调用stopPropagation(),就会在单击按钮时出现两个警告框。可是,由于click事件根本不会传播到document.body,因此就不会触发注册在这个元素上的onclick事件处理程序。
var jsButton5=document.getElementById("jsButton5"); jsButton5.onclick=function(event){ LS.log.write("event.type = "+event.type); LS.log.write("event.detail = "+event.detail); LS.log.write("event.eventPhase = "+event.eventPhase); event.stopPropagation(); };