Question

I had a function in which I had to attach event on an element newElement I checked the condition whether its IE or Firfox based on attachEvent property (works only in 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) ;               
} 

The required flow was deleteRow to execute first followed by customDeleteScript
It is working fine in Firefox/Chrome but the flow changes in IE customDeleteScript executes before deleteRow in IE. So I had to do as follows:

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

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

The question here lies is this property of IE or it is just a random hit and trial kind of scenario for IE always?

EDIT: What in case my function contains some parameters like this and others and I don’t know which function takes which parameters.

Answer 1

If order is important, you should not use separate event handlers. Call both functions in the desired order from one event handler like this:

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

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

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

FYI, a generic event handler function that you can reuse works like this:

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

Note, it’s better to check for addEventListener first so if both methods exist (like in IE9), your code will use the standard way.

So, your code can work like this:

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