How does addEventListener work in Internet Explorer 9 and what are the alternatives for older versions?

addEventListener in Internet Explorer

The addEventListener method is a versatile tool for attaching event listeners to elements in the web browser's Document Object Model (DOM). It offers a standardized approach to handling user interactions and events. However, the implementation of addEventListener differs across browsers. This article explores the usage and compatibility of addEventListener in Internet Explorer, specifically in version 9.

Equivalent to the Element Object in Internet Explorer 9

In Internet Explorer 9, the Element object serves as the counterpart to the Element prototype in other browsers. It encompasses all the standard DOM properties and methods applicable to HTML elements. The Element object provides access to various element attributes, such as:

• id
• class
• tagName
• parentNode
• childNodes

How addEventListener Works in Internet Explorer

Internet Explorer 9 natively supports the addEventListener method. It allows developers to assign event handlers to elements using the following syntax:

element.addEventListener(eventName, eventHandler, [options]);

Here, 'eventName' represents the specific event being listened for, such as 'click' or 'mouseenter'. 'eventHandler' refers to the function that will be executed when the event occurs. The optional 'options' parameter enables customization of event propagation and handling.

Alternative Method: attachEvent

For versions of Internet Explorer prior to version 9, an alternative method known as 'attachEvent' was used to handle events. Its syntax is:

element.attachEvent("on" + eventName, eventHandler);

'eventName' follows the same conventions as in addEventListener. Notably, 'attachEvent' requires the 'on' prefix before the event name.

Cross-Browser Compatibility Function

To ensure compatibility across browsers, both supporting addEventListener and attachEvent, a cross-browser addEvent function can be used:

function addEvent(evnt, elem, func) {
   if (elem.addEventListener)  // W3C DOM
      elem.addEventListener(evnt,func,false);
   else if (elem.attachEvent) { // IE DOM
      elem.attachEvent("on"+evnt, func);
   }
   else { // No much to do
      elem["on"+evnt] = func;
   }
}

This function attempts to use addEventListener for W3C DOM-compliant browsers and attachEvent for Internet Explorer.

The above is the detailed content of How does addEventListener work in Internet Explorer 9 and what are the alternatives for older versions?. For more information, please follow other related articles on the PHP Chinese website!