On the difference _javascript skills between AddEventListener and attachevent

AddEventListener has 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 to remove the "on" in front of the event, such as "onclick" to write "click", "onmouseover" to write "MouseOver".
Listener	The event listener to bind, note write-only function names, without parentheses.
Usercapture	Event Listener mode, only true and False:true, using capture (Capture) mode, false, bubbling (bubbling) mode. If there is no special requirement, it is generally false.

Here's the difference between capture mode and bubbling mode.

As shown in the figure, there are two layers of div elements, and all set the Click event, in general, if I click on the layer blue element to not only trigger the Blue element Click event, but also trigger the Red element Click event, And usecapture This parameter is to control this time two click event sequence. If False, it uses bubbling (bubbling) mode, which is a process from the inside, so the click event of the blue element is executed before the Click event of the red element is performed, and if true, that is the capture (capture) mode, and bubbling (bubbling Instead of the outside, the click event of the red element is executed before the event of the blue element is executed.

If the elements of different layers use different usecapture, the event that is set to the capture (capture) pattern is searched from the outermost element to the target element, and after the event that the target element executes the target element, then the original path is searched out for the event that is set to bubbling (bubbling) mode.

Attachevent has 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, plus the "on" in front of the event, such as "onclick" and "onmouseover", which is the difference from the AddEventListener.
Listener	The event listener to bind, note write-only function names, without parentheses.

AddEventListener () is the standard binding event listener method, supported by the consortium, Chrome, FireFox, Opera, Safari, This function is supported by IE9.0 and above, but IE8.0 and the following version do not support the method, which uses attachevent () to bind event listener functions. Therefore, this method of binding events must handle browser compatibility issues.

Code compatible with IE and non-IE browser event bindings:

function Addevent (obj,type,handle) {
  try{//Chrome, FireFox, Opera, Safari, IE9.0, and above
    Obj.addeventlistener ( Type,handle,false);
  } catch (e) {
    try{//IE8.0 and its following version
      Obj.attachevent (' on ' + Type,handle);
    } catch (E) {//early browser
      obj[' on ' + type] = Handle
    }}
  }

Or

function Regevent (ele, Event_Name, fun)
{
  if (window.attachevent) 
    ele.attachevent (event_name, fun); /ie Browser
  Else
  {
    event_name = Event_name.replace (/^on/, "");  If on begins, delete on, such as Onclick->click
    Ele.addeventlistener (Event_Name, fun, false);//non IE browser
  }
}

Above this article on the difference between AddEventListener and Attachevent is small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.