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

Monitor a user's activity and restrict the use of multiple windows or tabs using a combination of PHP and

Issue with jQuery not being able to retrieve the data from my CSS property

What are the steps to restrict the scope of a <style> declaration in HTML?

Add integer to an array of strings

What is the best method for sending a document to a web API using Ajax, without relying on HTML user controls or forms?

Which is the better option: utilizing the submit event of the form, or incorporating ajax functionality?

Mongoose is unable to update arrays, so it will simply create a new array

Changing color of entire SVG image: a step-by-step guide

Enhance your Morris.js charts by incorporating detailed notes and annotations

Queries with MongoDB RegEx fail to return any matches if the search string contains parentheses

Ways to customize the appearance of an iframe's content from a separate domain

The only numbers that can be typed using Typescript are odd numbers

Clicking our way back through the loop

The instance does not have a definition for the property or method "foo" that was referenced during rendering

I need guidance on how to successfully upload an image to Firebase storage with the Firebase Admin SDK

Anticipate that the typescript tsc will generate an error, yet no error was encountered

What could be causing my router UI in angular.js to malfunction?

What is the safest way to convert a local file path to a file:// URL in Node.js?

Styling a Pie or Doughnut Chart with CSS

The jQuery extension for XDomainRequest in the $.ajax function called onprogress is