IE和Firefox中的事件
IE,Firefox中的事件对象Event:
在IE中,不能把Event对象作为参数传递给事件处理程序,只能用window.event或者event来引用Event对象。因为在IE中,event是window的一个属性,也就是说event是一个全局变量,这个变量提供了事件的细节。
Firefox支持几乎所有的W3C
DOM二级标准,和部分W3C DOM三级标准。W3C
DOM中的Event对象并不是window全局对象下面的属性,换句话说,event不是全局变量。
通常在W3C的DOM二级标准中,event作为发生事件的文档对象的属性。
在Firefox下JavaScript函数中获取event的方法:
1、从调用JavaScript函数的HTML页面显式传递参数event(实参的名称一定要用event)
。
2、若HTML元素的某个事件上直接绑定(在标签里绑定)了一个函数,则在该函数中可以通过event =
arguments.callee.caller.arguments[0];来获取event对象。
3、
document.onclick =
click;
function click(evt){
var event =
evt||window.event;
}
事件处理过程:
在DOM二级标准中,事件处理过程比较复杂(功能比IE强大),当事件发生的时候,目标节点的事件处理程序就会被触发执行,但是目标节点的父节点也有机会来处理这个事件。事件的传播分为三个阶段,首先是捕获阶段,事件从document对象沿着DOM树向下传播到目标节点,如果目标的任何一个父节点注册了捕捉事件的处理函数,那么事件在传播的过程中就会首先运行这个函数。下一个阶段就是发生在目标节点自身了,注册在目标节点上的相应的事件处理函数就会执行;最后是起泡阶段,事件将从目标节点向上传回给父节点,同样,如果父节点有相应的事件处理函数也会执行,最终传至document对象而结束。眼下,大多数支持DOM二级标准的浏览器事件处理的始、终点是window对象(document对象的父节点)。在DOM二级标准中,为某个元素注册事件处理函数用addEventListener(),移除用removeEventListener(),这两个方法都有三个参数,第一个是事件名称,第二个是处理函数(句柄),第三个是一个布尔值,true表示指定的事件处理函数在捕获阶段执行,false表示在冒泡阶段。语法如下:
obj.addEventListener("eventName",
funHandler, capture);
obj.addEventListener("eventName", funHandler,
capture);
在IE中,没有事件捕获阶段,只支持冒泡阶段。IE中事件的冒泡:IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理函数,到了上层的节点如果还有和下层相同事件类型的事件处理函数,那么上层的事件处理函数也会执行。例如:有两个节点,其中一个是另一个的子节点,如果子节点有onclick事件的处理函数,那么执行的情况就是先执行子节点的onclick事件处理函数,当事件冒泡到父节点上时再执行一次onclick事件处理函数。在IE中,注册事件处理函数用attachEvent(),移除用detachEvent(),它们有两个参数:事件名称和处理函数(句柄)。语法如下:
obj.attachEvent
(on+ "eventName", funHandler);
obj.detachEvent (on+ "eventName",
funHandler);
在IE中使用event.cancelBubble =
true;来取消事件冒泡,在Firefox中用stopPropagation()方法来停止事件冒泡,即不要让别的元素看到该事件。
<i>:兼容IE、Firefox给obj添加(注册)单击事件
if(obj.attachEvent)
//for IE
{
obj.attachEvent("onclick", SelectClickRow);
//
obj是table,单击table的某单元格时,SelectClickRow会执行多次
}
if(obj.addEventListener)
//for Firefox
{
obj.addEventListener("click", SelectClickRow, false);
}
//或者document.attachEvent?obj.attachEvent("onclick",
SelectClickRow):obj.addEventListener ("click", SelectClickRow,
false);
function SelectClickRow()
{
/*
由于SelectClickRow是通过attachEvent注册到对象的,而attachEvent没有绑定this引用,故:
在IE下 this ==
window
在Firefox中 this == obj
*/
var cell = window.event.srcElement;
//srcElement是触发该事件的对象(在Table中是一个单元格),Firefox中使用target
var row =
cell.parentNode;
row.style.backgroundColor =
"#eeeeee";
}
取消(删除)单击事件
if(obj.detachEvent) //for IE
{
obj.
detachEvent("onclick", SelectClickRow);
}
if(obj.removeEventListener)
//for Firefox
{
obj.removeEventListener("click", SelectClickRow, false);
}
<ii>:旧规范提供的给obj添加(注册)单击事件
//
为obj添加(注册)单击事件,把一个函数的引用赋值给obj的一个事件属性
obj.onclick = DoClick;
//只支持事件冒泡,且只能注册一个处理函数(会覆盖)
//若要传参数 obj.onclick = function(){ DoClick(parama);
};
// obj单击事件的处理函数
function DoClick()
{
/* 这里this ==
obj,无论是IE还是Firefox,但是在Firefox下无法通过arguments.callee.caller.arguments[0]来获取event对象。原因在于注册事件的方式为obj.onclick
= DoClick;。 */
window.event.srcElement;
/*
srcElement是触发单击事件处理函数的对象,Firefox中使用target(或者直接使用this)。在table中接收单击事件的对象是一个单元格。The
object of response event is a cell in table.
*/
}
此外,HTML中还有两种添加(注册)单击事件的方式:
<a href = "javascript:
DoClick();" >Click </a>
<a href = "#" onclick = "javascript:
DoClick(); return false;">Click
</a>
Firefox中的onchang事件与IE中onchange事件、onpropertychange事件:①、对于checkbox、input
type="file"等元素,在Firefox中只要元素的内容一发生变化就触发onchang事件,而在IE中需等到元素失去焦点才触发onchang事件;对于input
type="text",FF和IE下一样,都是失去焦点之后才触发onchang事件。②、IE中当元素的属性值或内容一发生变化(含JavaScript操作)就激发onpropertychange事件,Firefox无此事件。