The difference between AddEventListener and attachevent and Element.onclick

Attachevent is the IE add event handler, receive two parameters, where the event type name is added "on",

Multiple event handlers can be added and triggered in reverse order of addition;

AddEventListener is to add an event handler for non-IE, receive three parameters, the first is the event name, do not need to add "on",

The second is a bound function, and the third parameter is a Boolean value, which is the way of the event, meaning whether to use the Usecatch method,

If False, the traditional bubbling method is used, and if true, the event handler is invoked during the capture phase.

AddEventListener can add multiple event handlers that trigger in the order in which they are added

There is an essential difference between the two, and the Attachevent event handler runs in the global scope, which is equal to the Window object,

The event handler added by Addeventlinstener is run in the scope of the element it is attached to, and this is equal to the binding element object.

Since their this point is different, how can we achieve the same this point?

If you want to implement the this keyword to point to the same, use the function's apply or call method. The sample code is as follows:

function bind (EL, FN, type) {        var _fn = function () {                fn.apply (el, arguments);        };        Window.addeventlistener? El.addeventlistener (Type, _FN, false): El.attachevent ("on" + Type, _FN);

Use El instead of this in _FN. ( method to be tested)

What is the difference between El.onclick and AddEventListener and attachevent?
The essential difference is that El.onclick is equivalent to writing the onclick on the label, using AddEventListener and attachevent to bind the event via the DOM interface. Parsing an HTML document is sequential, parsing the label item, parsing the DOM entry, and El.onclick actually writing on the label, entering the document with the OnClick property of the tag, and then parsing the document into an event. In the latter case, to bind events through the DOM interface of the document after the document parsing is complete, the result is the same as the Click event, but the process is different.How do I cancel an event that is bound in these three ways? El.onclick:el.onclick=null, so you can unbind the event handlers on the El. Event handlers added through AddEventListener () can only be removed through RemoveEventListener (), and the parameters passed in when they are removed are the same as those used when adding handlers. Anonymous functions added through AddEventListener () will not be removed. Event handlers that are added through attachevent () are removed by DetachEvent (), and others are the same as AddEventListener ().If you want to get the event object in the events function, how to get it? This will be divided into browsers, ie and non-ie event objects are different. A DOM-compatible browser passes an event object into the events handler, passing in the incident object regardless of the method used when the event handler is specified.

El.onclick=function (Event) {alert (event.type);           "Click"};el.addeventlistener ("click", Function (event) {alert (el.type);               "click"},false);

Event handlers are saved in the variable event when specified by an HTML tag property.

<input type= "button" value= "click Me" onclick= "alert (event.type)"/>   //"click"

In IE, there are several different ways to access an event object: In an event handler that is bound by El.onclick, the event object exists as a property of the Window object.

El.onclick=function () {var event=window.event; alert (event.type);              "Click"}

If you add an event handler through Attachevent (), the event object is passed in as a parameter to the handler,

El.attachevent ("onclick", function (event) {alert (event.type);                 "Click"});

Event handlers are saved in the variable event when specified by an HTML tag property. This is the same as non-ie. In summary, the cross-browser event object Acquisition method is:return event?event:window.event; transferred from: http://www.cnblogs.com/kakemei/p/3290655.html

The difference between AddEventListener and attachevent and Element.onclick