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)