A brief discussion on common methods of JavaScript event binding and analysis of its advantages and disadvantages

Traditional way

element.onclick = function(e){
 
   // ...
 
 };

1. The advantages of traditional binding

are very simple and stable, ensuring that it works consistently in different browsers you use

When handling events, the this keyword refers to the current Element, this is very helpful

2. Disadvantages of traditional binding

Traditional methods will only run in event bubbling, instead of capturing and bubbling

An element can only be bound to one event handler at a time. The newly bound event handling function will overwrite the old event handling function

The event object parameter (e) is only available for non-IE browsers

W3C method

element.addEventListener('click', function(e){
 
   // ...
 
 }, false);

1. Advantages of W3C binding

This method It also supports the capture and bubbling phases of event processing. The event stage depends on the last parameter setting of addEventListener: false (bubble) or true (capture).

Inside the event handler function, the this keyword refers to the current element.

Event objects can always be captured via the first argument (e) of the handler function.

You can bind multiple events you want to the same element without overwriting previously bound events

2. Disadvantages of W3C binding

IE does not support it, you must use IE's attachEvent function instead .

IE method

element.attachEvent('onclick', function(){
 
    // ...
 
  });

1. Advantages of IE method

You can bind multiple events you want to the same element without overwriting previously bound events.

2. Disadvantages of the IE method

IE only supports the bubbling phase of event capture

The this keyword in the event listening function points to the window object, not the current element (a huge shortcoming of IE)

The event object only The event that exists in the window.event parameter must be named in the form of ontype, for example, onclick instead of click. It is only available in IE. You must use W3C's addEventListener

Dean Edwards' solution (addEvent/removeEvent library) in non-IE browsers

1. The advantages of addEvent

can work in all browsers, even older browsers without any support

This keyword can be used in all binding functions, pointing to the current element

Neutralizes all various browser-specific functions that prevent the browser's default behavior and prevent event bubbling

regardless of browser type , the event object is always passed in as the first object

2. Disadvantages of addEvent

only works in the bubbling phase (because it deeply uses the traditional way of event binding)