How to effectively implement addEventListener() / attachEvent()?

Question

How to effectively implement addEventListener() / attachEvent()?

Can anyone provide guidance on how to correctly use addEventListener and attachEvent?

window.onload = function (myFunc1) { /* do something */ }

function myFunc2() { /* do something */ }

if (window.addEventListener) {
  window.addEventListener('load', myFunc2, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', myFunc2);
}

 // ...

or

function myFunc1() { /* do something */ }

if (window.addEventListener) {
  window.addEventListener('load', myFunc1, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', myFunc1);
}

function myFunc2() { /* do something */ }

if (window.addEventListener) {
  window.addEventListener('load', myFunc2, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', myFunc2);
}

 // ...

Which approach is cross-browser secure or would it be better to utilize the following method:

function myFunc1(){ /* do something */ }
function myFunc2(){ /* do something */ }
// ...

function addOnloadEvent(fnc){
  if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", fnc, false );
  else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", fnc );
  }
  else {
    if ( window.onload != null ) {
      var oldOnload = window.onload;
      window.onload = function ( e ) {
        oldOnload( e );
        window[fnc]();
      };
    }
    else
      window.onload = fnc;
  }
}

addOnloadEvent(myFunc1);
addOnloadEvent(myFunc2);
// ...

Additionally: How should we modify the correct/preferred method if `myfunc2` specifically for IE7?

javascript addeventlistener attachevent

Answer 1

Answer №1

Both of these methods have a similar purpose, but they differ slightly in their syntax for the event parameter:

addEventListener (mdn reference):

Supported by major browsers like Firefox, Chrome, and Edge.

obj.addEventListener('click', callback, false);

function callback(){ /* do stuff */ }

Check out the events list for addEventListener.

attachEvent (msdn reference):

Specifically supported by IE 5-8*

obj.attachEvent('onclick', callback);

function callback(){ /* do stuff */ }

Refer to the events list for attachEvent.

Arguments

In both methods, the arguments are as follows:

The event type.
The function to call when the event is triggered.
(Only for addEventListener) If true, indicates that the user wants to initiate capture.

Explanation

Both methods serve the same purpose of attaching an event to an element.
The key difference is that attachEvent is limited to older trident rendering engines (IE5-8*) while addEventListener is a W3 standard implemented in most other browsers (Firefox, Webkit, Opera, IE9+).

To ensure solid cross-browser event support with normalizations not provided by the Diaz solution, consider using a framework.

*IE9-10 support both methods for backward compatibility.

Credit to Luke Puplett for noting that attachEvent has been removed in IE11.

Minimal cross-browser implementation

Following Smitty's recommendation, you can utilize this Dustin Diaz addEvent implementation for a robust cross-browser solution without relying on frameworks:

function addEvent(obj, type, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
  }
  else if (obj.attachEvent) {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() {obj["e"+type+fn](window.event);}
    obj.attachEvent("on"+type, obj[type+fn]);
  }
  else {
    obj["on"+type] = obj["e"+type+fn];
  }
}

addEvent( document, 'click', function (e) {
  console.log( 'document click' )
})

Answer 2

Both of these methods have a similar purpose, but they differ slightly in their syntax for the event parameter:

addEventListener (mdn reference):

Supported by major browsers like Firefox, Chrome, and Edge.

obj.addEventListener('click', callback, false);

function callback(){ /* do stuff */ }

Check out the events list for addEventListener.

attachEvent (msdn reference):

Specifically supported by IE 5-8*

obj.attachEvent('onclick', callback);

function callback(){ /* do stuff */ }

Refer to the events list for attachEvent.

Arguments

In both methods, the arguments are as follows:

The event type.
The function to call when the event is triggered.
(Only for addEventListener) If true, indicates that the user wants to initiate capture.

Explanation

Both methods serve the same purpose of attaching an event to an element.
The key difference is that attachEvent is limited to older trident rendering engines (IE5-8*) while addEventListener is a W3 standard implemented in most other browsers (Firefox, Webkit, Opera, IE9+).

To ensure solid cross-browser event support with normalizations not provided by the Diaz solution, consider using a framework.

*IE9-10 support both methods for backward compatibility.

Credit to Luke Puplett for noting that attachEvent has been removed in IE11.

Minimal cross-browser implementation

Following Smitty's recommendation, you can utilize this Dustin Diaz addEvent implementation for a robust cross-browser solution without relying on frameworks:

function addEvent(obj, type, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
  }
  else if (obj.attachEvent) {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() {obj["e"+type+fn](window.event);}
    obj.attachEvent("on"+type, obj[type+fn]);
  }
  else {
    obj["on"+type] = obj["e"+type+fn];
  }
}

addEvent( document, 'click', function (e) {
  console.log( 'document click' )
})

Answer 3

Answer №2

If you're still following this thread and haven't found the solution you need, take a look at:

I came across this elegant solution that works well for those of us who are limited in using frameworks.

function addEvent(obj, type, fn) {

    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
        EventCache.add(obj, type, fn);
    } else if (obj.attachEvent) {
        obj["e" + type + fn] = fn;
        obj[type + fn] = function() {
            obj["e" + type + fn](window.event);
        }
       
        obj.attachEvent("on" + type, obj[type + fn]);
        
        EventCache.add(obj, type, fn);
    } else {
        obj["on" + type] = obj["e" + type + fn];
    }

}

var EventCache = function() {

    var listEvents = [];
    
    return {
        listEvents: listEvents,
        
        add: function(node, sEventName, fHandler) {
            listEvents.push(arguments);
        },
        
        flush: function() {
            var i, item;

            for (i = listEvents.length - 1; i >= 0; i = i - 1) {
                item = listEvents[i];
                
                if (item[0].removeEventListener) {
                    item[0].removeEventListener(item[1], item[2], item[3]);
                };

                if (item[1].substring(0, 2) != "on") {
                    item[1] = "on" + item[1];
                };

                if (item[0].detachEvent) {
                    item[0].detachEvent(item[1], item[2]);
                };

                item[0][item[1]] = null;
            };
        }
    };
}();

addEvent(window, 'unload', EventCache.flush);

Answer 4

If you're still following this thread and haven't found the solution you need, take a look at:

I came across this elegant solution that works well for those of us who are limited in using frameworks.

function addEvent(obj, type, fn) {

    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
        EventCache.add(obj, type, fn);
    } else if (obj.attachEvent) {
        obj["e" + type + fn] = fn;
        obj[type + fn] = function() {
            obj["e" + type + fn](window.event);
        }
       
        obj.attachEvent("on" + type, obj[type + fn]);
        
        EventCache.add(obj, type, fn);
    } else {
        obj["on" + type] = obj["e" + type + fn];
    }

}

var EventCache = function() {

    var listEvents = [];
    
    return {
        listEvents: listEvents,
        
        add: function(node, sEventName, fHandler) {
            listEvents.push(arguments);
        },
        
        flush: function() {
            var i, item;

            for (i = listEvents.length - 1; i >= 0; i = i - 1) {
                item = listEvents[i];
                
                if (item[0].removeEventListener) {
                    item[0].removeEventListener(item[1], item[2], item[3]);
                };

                if (item[1].substring(0, 2) != "on") {
                    item[1] = "on" + item[1];
                };

                if (item[0].detachEvent) {
                    item[0].detachEvent(item[1], item[2]);
                };

                item[0][item[1]] = null;
            };
        }
    };
}();

addEvent(window, 'unload', EventCache.flush);

How to effectively implement addEventListener() / attachEvent()?

Answer №1

addEventListener (mdn reference):

attachEvent (msdn reference):

Arguments

Explanation

Minimal cross-browser implementation

Answer №2

Similar questions

Unable to load more than one controller in a single partial view using AngularJS

Pass the identification of a particular card to the following route in order to retrieve data using that specific id in nextjs

Tips for making a website display in landscape mode rather than portrait orientation

Ways to prompt a specific text value to generate varied responses

Transform the blob, which includes an image, into just an image and insert it into the <img> tag

"Enhance your website with the magic of jQuery magnific-popup

What is the reason for the value of an object's key becoming undefined when it is set within a loop?

How can I generate a list of JavaScript files to be included in a template for both production and development environments using Grunt?

Improved AJAX Dependency

The ng-click function ceases to trigger after the $location dependency is included in the controller

Accessing the camera or photo library in React Native does not require any permissions

The ng-isolate-scope is not properly connected to the specified templateUrl

After subscribing, my Angular template fails to refresh

Update the text using JavaScript to modify the price range dropdown when the user clicks away

How to assign a value to an array within a form in Angular 8

Best Practices for Safely Storing the JWT Client Credentials Grant

What is the best way to display JavaScript in a view in ASP.NET MVC 3?

Tips for converting JSON information on a website and inserting it into a designated division?

Having trouble retrieving the value of a textarea within a jQuery UI dialog box

The data stored in LocalStorage disappears when the page is refreshed