javascript - 在多个浏览器中附加事件

Question

我有一个必须在元素 newElement 上附加事件的函数，我根据 attachEvent 属性检查了其 IE 还是 Firfox 的条件(仅适用于 IE) )。

if ( typeof(newElement.attachEvent) != "undefined" )
{               
    newElement.attachEvent("onclick", deleteRow) ;  
    newElement.attachEvent("onclick", customDeleteScript) ;
}else
{   

    newElement.addEventListener("click", deleteRow, false) ;    
    newElement.addEventListener("click", customDeleteScript, false) ;               
} 

所需的流程是首先执行deleteRow，然后执行customDeleteScript 它在 Firefox/Chrome 中工作正常，但 IE 中的流程发生变化 customDeleteScript 在 IE 中的 deleteRow 之前执行。所以我必须这样做:

if ( typeof(newElement.attachEvent) != "undefined" )
{               
    newElement.attachEvent("onclick", customDeleteScript) ;
    newElement.attachEvent("onclick", deleteRow) ;  
}else
{   

    newElement.addEventListener("click", deleteRow, false) ;    
    newElement.addEventListener("click", customDeleteScript, false) ;               
} 

这里的问题在于，这是 IE 的属性还是只是 IE 的随机点击和试用场景？

编辑:如果我的函数包含一些参数，例如 this 和其他参数，并且我不知道哪个函数采用哪些参数，该怎么办？

Answer 1

如果顺序很重要，则不应使用单独的事件处理程序。从一个事件处理程序中按照所需的顺序调用这两个函数，如下所示:

function delete() {
    deleteRow();
    customDeleteScript();
}

if ( typeof(newElement.attachEvent) != "undefined" )
{               
    newElement.attachEvent("onclick", delete) ;  
}else
{   

    newElement.addEventListener("click", delete, false) ;    
} 

仅供引用，您可以重用的通用事件处理函数的工作原理如下:

function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.apply(elem, arguments));   
        });
    }
}

请注意，最好先检查 addEventListener，这样如果两种方法都存在(如 IE9 中)，您的代码将使用标准方式。

所以，你的代码可以像这样工作:

addEvent(newElement, 'click', function() {
    deleteRow();
    customDeleteScript();
});