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.
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.
the parsing of an HTML document is sequential, parsing the label item first, and then parsing the DOM entry, El.onclick is actually the equivalent of writing on the label,
The label's OnClick property is entered into the document and then parsed into the event by the document. And the latter, after the document parsing is complete,
events that are bound through the DOM interface of the document, although the results are the same, are the click events, 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 by RemoveEventListener (), and parameters passed in when removed are added
the same parameters are used when processing the program. 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 to the events handler, regardless of the specified event
the event object is passed in when the handler is used.
El.onclick=function (event) {
alert (event.type);//"click"
};
El.addeventlistener ("click", Function (event) {
alert (event.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"
There are several different ways to access an event object in IE:
in an event handler 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;
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
The difference between AddEventListener and attachevent and Element.onclick in JavaScript
