Connecting events across various browsers

Question

Connecting events across various browsers

In a function, I had to add an event to an element called newElement. To cater for different browsers like IE and Firefox, I checked the condition based on the attachEvent property (only works 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 original requirement was for deleteRow to run before customDeleteScript. This setup worked correctly in Firefox and Chrome but not in IE where customDeleteScript executed first. In order to fix this issue, I had to rearrange the event additions as shown below:

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 arises whether this behavior is specific to IE or if it's just a random occurrence with IE always?

EDIT: What happens if my function has parameters like this and others, and I'm unsure which function requires which parameters.

javascript internet-explorer cross-browser dom-events

Answer 1

Answer №1

To ensure the order of operations is maintained, it's recommended not to use separate event handlers. Instead, you can call both functions in the desired sequence from a single event handler as shown below:

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

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

If you want to create a reusable event handler function, you can follow this approach:

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

It's advisable to check for addEventListener first so that your code utilizes the standard method if it's available, even in browsers like IE9 where both methods exist.

You can implement your code using the addEvent function like so:

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

Answer 2

To ensure the order of operations is maintained, it's recommended not to use separate event handlers. Instead, you can call both functions in the desired sequence from a single event handler as shown below:

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

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

If you want to create a reusable event handler function, you can follow this approach:

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

It's advisable to check for addEventListener first so that your code utilizes the standard method if it's available, even in browsers like IE9 where both methods exist.

You can implement your code using the addEvent function like so:

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

Answer 3

Answer №2

To ensure that the customDeleteScript() function is executed after deleteRow(), simply include a return true statement at the end of the deleteRow() function:

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

Then, you can call customDeleteScript() like this:

if(deleteRow()) customDeleteScript();

You can follow jfriend00's suggestion for event registration as it allows for more dynamic handling. Registering two separate event handlers as described in the question may not be the most suitable approach.

Update: Research shows that in Internet Explorer, registered event handlers are fired "last in first out (in reverse order)" for elements with multiple events. You can test this behavior by using this fiddle. For instance:

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

In Chrome, function1 will be triggered first followed by function2, while in IE, function2 will be triggered first and then function1. Therefore, it would be best to register only one event and call both functions within the same handler:

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

Answer 4

To ensure that the customDeleteScript() function is executed after deleteRow(), simply include a return true statement at the end of the deleteRow() function:

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

Then, you can call customDeleteScript() like this:

if(deleteRow()) customDeleteScript();

You can follow jfriend00's suggestion for event registration as it allows for more dynamic handling. Registering two separate event handlers as described in the question may not be the most suitable approach.

Update: Research shows that in Internet Explorer, registered event handlers are fired "last in first out (in reverse order)" for elements with multiple events. You can test this behavior by using this fiddle. For instance:

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

In Chrome, function1 will be triggered first followed by function2, while in IE, function2 will be triggered first and then function1. Therefore, it would be best to register only one event and call both functions within the same handler:

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

Answer 5

Answer №3

To tackle this issue, combine both handlers into one function and designate that singular function as the handler:

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

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

Answer 6

To tackle this issue, combine both handlers into one function and designate that singular function as the handler:

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

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

Answer 7

Answer №4

The sequence of events linked with attachEvent to the same element and type is unpredictable, as opposed to addEventListener, which follows the order in which they are declared. If order matters, consider invoking the second function from the first or merging them into one.

Another contrast is that attachEvent can attach the same handler multiple times upon each call, allowing a single function to be executed repeatedly. In contrast, addEventListener only assigns it once regardless of how many times it is called with the same parameters.

Given that IE9+ does support addEventListener, rearrange your assignments accordingly and handle multiple assignments (there is no harm in attempting to remove a non-existent handler):

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 8

The sequence of events linked with attachEvent to the same element and type is unpredictable, as opposed to addEventListener, which follows the order in which they are declared. If order matters, consider invoking the second function from the first or merging them into one.

Another contrast is that attachEvent can attach the same handler multiple times upon each call, allowing a single function to be executed repeatedly. In contrast, addEventListener only assigns it once regardless of how many times it is called with the same parameters.

Given that IE9+ does support addEventListener, rearrange your assignments accordingly and handle multiple assignments (there is no harm in attempting to remove a non-existent handler):

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

Connecting events across various browsers

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to access a custom filter in ng-repeat using AngularJS

switch between showing and hiding dynamic table rows

Using val() on a checkbox will give you an element, not a string literal

Is there a way to retrieve the intersection point (Vector3) of the intersectObjects?

Is there a way to automatically scroll vertically to a specific line in HTML?

Keycloak does not support using the updateToken() function within an asynchronous function

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

Delving into the World of CSS

Setting up and launching a fresh JS project

The 'exhaustive-deps' warning constantly insists on requiring the complete 'props' object instead of accepting individual 'props' methods as dependencies

The functionality of two-way data binding seems to be failing when it comes to interacting with Knock

Tips for utilizing jQuery to identify an image that is being hovered on?

Troubleshooting: Angular Custom Elements malfunction on Firefox, Microsoft Edge, and Internet Explorer

Navigating using passing data in ReactJs

Broken links detected in the Full Page Navigation menu on a one-page website

"An error occurred stating that currDateEnd.setHours is not a valid function

What is the best way to handle multiple promises when loading a state in Angular?

Updating data scope in AngularJS using $http request not functioning properly

Creating a dynamic multi-choice dropdown list with Django and Vue.js

What is the method for stopping a slide in this script?