The difference between AddEventListener and attachevent

• AddEventListener a total of 3 parameters, as follows:
  Element.addeventlistener (type,listener,usecapture);
  

  Parameters	parameter Description
  Element	The object to bind the event to, and the HTML node.
  Type	Event name, notice the "on" in front of the event, such as "onclick" to write "click", "onmouseover" to write "MouseOver".
  Listener	To bind the event listener function, note that only the function name is written, not with parentheses.
  Usercapture	The event listener can only be true and False:true, using capture (Capture) mode, false, bubbling (bubbling) mode. If no special requirements, it is generally false.

  Here it is necessary to say the difference between capture mode and bubbling mode.
  
  , there are two levels of DIV elements, and all of them have a click event, and generally, if I click on the inner blue element, it will not only trigger the Click event of the blue element, but it will also trigger the Click event of the red element. The Usecapture parameter is the order in which two click events are controlled at this time. If it is false, then it will use the bubbling (bubbling) mode, which is the process from the inside out, so the click event of the blue element is executed before the Click event of the red element is executed, and if true, the capture mode, and bubbling (bubbling The inverse of the pattern is the click event of the blue element, which executes the Red element's Click event First, by the outside and inside.
  If the elements of different layers use different usecapture, the event that is set to capture (capture) mode is first searched from the outermost element to the target element, and the target element executes the event of the target element, and then seeks out the original path to look out for events set to bubbling (bubbling) mode.
• Attachevent a total of 2 parameters, as follows:
  Element.attachevent (Type,listener);
  

  Parameters	parameter Description
  Element	The object to bind the event to, and the HTML node.
  Type	The event name, note plus the "on" in front of the event, such as "onclick" and "onmouseover", which is the difference from AddEventListener.
  Listener	To bind the event listener function, note that only the function name is written, not with parentheses.

AddEventListener () is the standard method of binding event listener functions, supported by the consortium, Chrome, FireFox, Opera, Safari, This function is supported by IE9.0 and above, but IE8.0 and the following versions do not support this method, and it uses attachevent () to bind the event listener function. Therefore, this method of binding an event must handle browser compatibility issues. Compatible with IE and non-IE browser event binding code:

2. function Addevent (obj,type,handle) {
4. try{ //Chrome, FireFox, Opera, Safari, IE9.0 and above
6. Obj.addeventlistener (Type,handle,false);
8. }catch (e) {
10. try{ //IE8.0 and the following versions
12. Obj.attachevent (' on ' + type,handle);
14. }catch (e) { ///early browser
16. obj[' on ' + type] = handle;
18. }
20. }
22. }

Or

2. function Regevent (ele, event_name, Fun)
4. {
6. if (window.attachevent)
8. Ele.attachevent (Event_Name, fun); //ie Browser
10. Else
12. {
14. Event_Name = Event_name.replace (/^on/, ""); //If on starts, remove on, such as Onclick->click
16. Ele.addeventlistener (Event_Name, fun, false); //non-IE browser
18. }
20. }

The difference between AddEventListener and attachevent