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无此事件。