Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • IE和Firefox中的事件

    post by onelong / 2009-10-6 23:01 Tuesday [javascript]

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

    引用地址:
     

    我要评论