1, DOM0 level event handler
A function value is given to an event handler property.
For example:
Copy Code code as follows:
var btn = document.getElementById ("mybtn");
Btn.onclick = Funtion () {
alert (this.id); "Mybtn"
}
Delete event, Btn.onclick = null;
--------------------------------------------------------------------------------
2, DOM2 level event handler
First, the two methods defined by the "DOM2 level event" are used to handle the actions that specify and delete an event handler:
AddEventListener ()
RemoveEventListener ()
All DOM nodes contain both methods, accepting 3 parameters: Handling the event name, the function as the event handler, and a Boolean value.
The last Boolean parameter, true: indicates that the event handler is invoked during the capture phase; false: The event handler is invoked during the bubbling phase. \
Copy Code code as follows:
var btn = document.getElementById ("mybtn");
Btn.addeventlistener ("Click", Funciton () {
alert (this.id);
},false);
The main benefit of adding an event handler with the DOM2 level method is that you can add multiple event handlers.
For example:
Copy Code code as follows:
var btn = document.getElementById ("mybtn");
Btn.addeventlistener ("Click", Funciton () {
alert (this.id);
},false);
Btn.addeventlistener ("Click", Funciton () {
Alert ("Hello world! ”);
},false);
These two events are triggered in sequence.
Events added through AddEventListener () can only be removed with RemoveEventListener (). The parameters passed in when they are removed need to be the same as when they were added, which means that anonymous functions cannot be removed.
Copy Code code as follows:
var btn = document.getElementById ("mybtn");
var handler = function () {
alert (this.id);
};
Btn.addeventlistener ("Click", Handler, false);
Btn.removeeventlistener ("Click", Handler, false);
In most cases, you add event handlers to the bubbling phase of the event stream to be compatible with various browsers.
Firefox, Safari, Chrome, Opera support DOM2-level event handlers.
--------------------------------------------------------------------------------
3, IE event handling procedures
IE implements two methods similar to the DOM:
Attachevent ()
DetachEvent ()
Both methods accept two parameters: an event handler name and an event handler function.
Because IE only supports time bubbling, event handlers added through Attachevent () are added to the bubbling phase.
For example:
Copy Code code as follows:
var btn = document.getElementById ("mybtn");
Btn.attachevent ("onclick", function () {
Alert ("clicked");
})
Note that the first parameter of attachevent () is "onclick", not "click".
The main difference between IE's attachevent () and DOM0 's AddEventListener () is the scope of the event handler.
DOM0-level method, event handlers run within the scope of the owning element;
Attachevent () method, the event handler runs in the global scope, so this is equal to window.
Attachevent () can also add multiple event handlers for an element.
Copy Code code as follows:
var btn = document.getElementById ("mybtn");
Btn.attachevent ("onclick", function () {
Alert ("clicked");
})
Btn.attachevent ("onclick", function () {
Alert ("Hello world!");
})
Unlike DOM methods, these event handlers are not executed in the order of addition, but in the opposite direction.
The use of DetachEvent () is the same as for RemoveEventListener ().
--------------------------------------------------------------------------------
4. Cross-browser event handlers
Copy Code code as follows:
var eventutil = {
Addhandler:function (element, type, handler) {
if (element.addeventlistener) {
Element.addeventlistener (type, handler, false);
} else if (element.attachevent) {
Element.attachevent ("on" + type, handler)
} else {
element[' on ' + Type] = handler;
}
},
Removehandler:function (element, type, handler) {
if (element.removeelementlistener) {
element.removeelementlistener (type, handler, flase);
} else if (element.detachevent) {
Element.detachevent ("on" + type, handler)
} else {
element[' on "+ type] = handler;
}
}
}
