Присоединение события в многократном браузере

Question

У меня была функция, в которой мне нужно было прикрепить событие к элементу newElement Я проверил условие, является ли его IE или FF основанным на attachEvent proprety (работает только в 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 Он работает нормально в ff / chrome, но изменения потока в IE customDeleteScript выполняются до deleteRow в IE.Поэтому я должен был сделать следующее:

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

Если вы хотите выполнить функцию customDeleteScript () после выполнения deleteRow (), вы можете просто добавить выражение возврата true в конце функции deleteRow (), например

function deleteRow()
{
    // other code
    return true;
}

и вызовите customDeleteScript () как

if(deleteRow()) customDeleteScript();

Вы можете использовать ответ jfriend00 для регистрации событий, он более динамичен, и регистрация двух отдельных обработчиков событий по этой причине (как вы описали в своем вопросе) не является подходящим способом.

Обновление: После некоторого исследования я обнаружил, что IE запускает зарегистрированные обработчики событий " последним первым пришел (в обратном порядке) " для элемента, который имеет несколько событий. Попробуйте эту скрипку в IE и Chrome / FF . Например

function addEventHandler(to_element,event,handler)
{
    if (to_element.addEventListener) to_element.addEventListener(event,handler,false);
    else if (to_element.attachEvent) to_element.attachEvent("on"+event,handler);
    else return false;
}


function function1()
{
    alert("first alert");
}

function function2()
{
    alert("second alert");
}

var obj=document.getElementById('obj');
addEventHandler(obj,"click",function1);
addEventHandler(obj,"click",function2);​

В Chrome функция 1 будет запущена первой, а затем функция 2 будет запущена , но в IE функция 2 будет запущена первой, а затем функция 1 (в обратном порядке) . Таким образом, в соответствии с вопросом, я думаю, что только одно событие должно быть зарегистрировано и вызывать обе функции в одном и том же обработчике, как

function deleteRow()
{
    // other code here
    return true;
}
function customDeleteScript()
{
    // code here
}
addEventHandler(obj,"click",myHandler);
function myHandler()
{
    if(deleteRow()) customDeleteScript();
}

Answer 2

Если порядок важен, вы не должны использовать отдельные обработчики событий. Вызовите обе функции в нужном порядке из одного обработчика событий следующим образом:

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

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

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

FYI, универсальная функция обработчика событий, которую вы можете использовать повторно, работает следующим образом:

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();
});

Answer 3

порядок событий, прикрепленных с attachEvent к одному и тому же элементу и типу, равен , а не гарантированно будет тем порядком, в котором они были объявлены.Это не поведение addEventListener, который выполняется в объявленном порядке.Если порядок важен, вам, возможно, придется вызвать вторую функцию из первой или объединить их в одну.

Другое отличие заключается в том, что attachEvent будет подключать один и тот же обработчик столько раз, сколько он вызывается, так чтоодну и ту же функцию можно вызывать много раз, а не только один раз.addEventListener назначает его только один раз, независимо от того, сколько раз вы вызываете его с одинаковыми аргументами.

Поскольку IE9 + поддерживает addEventListener, измените порядок своего назначения и учтите несколько назначений (это не повредит попыткеудалить несуществующий обработчик):

if (newElement.addEventListener ){
    newElement.addEventListener("click", deleteRow, false) ;    
    newElement.addEventListener("click", customDeleteScript, false) ;  
}
else if(newElement.attachEvent){   
    newElement.detachEvent("onclick", customDeleteScript) ; 
    newElement.detachEvent("onclick", deleteRow);   
    newElement.attachEvent("onclick", customDeleteScript) ;
    newElement.attachEvent("onclick", deleteRow) ;  
}

Answer 4

вы можете решить эту проблему, поместив эти два обработчика в одну функцию и установив эту одну функцию в качестве обработчика:

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

if (typeof(newElement.attachEvent) != "undefined") {               
    newElement.attachEvent("onclick", handler) ;  
} else {   
    newElement.addEventListener("click", handler, false) ;               
}