Introduction to javascript event processing programs. For details about js learning, refer
1. DOM0-level event handler
Returns a function value to an event handler property.
For example:
The Code is 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, we will introduce the two methods defined in "DOM2-level events" for processing specified and deleted Event Handlers:
AddEventListener ()
RemoveEventListener ()
All DOM nodes contain these two methods and accept three parameters: the event name, the function used as the event handler, and a Boolean value.
The last Boolean parameter, true: indicates that the event handler is called in the capture phase; false: indicates that the event handler is called in the bubble phase.
The Code is as follows:
Var btn = document. getElementById ("myBtn ");
Btn. addEventListener ("click", funciton (){
Alert (this. id );
}, False );
You can add multiple event handlers by using the DOM2-level method.
For example:
The Code is 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 using addEventListener () can only be removed using removeEventListener. The parameters passed in when the function is removed must be the same as those added at the time of addition. That is to say, the anonymous function cannot be removed.
The Code is 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, the event handler is added to the bubbling stage of the event stream to be compatible with various browsers.
Firefox, safari, chrome, and opera Support DOM2-level event handlers.
--------------------------------------------------------------------------------
3. IE event handler
IE implements two similar methods as in DOM:
AttachEvent ()
DetachEvent ()
Both methods accept two parameters: the name of the event handler and the function of the event handler.
Since IE only supports time bubbling, all event handlers added through attachEvent () are added to the bubble stage.
For example:
The Code is as follows:
Var btn = document. getElementById ("myBtn ");
Btn. attachEvent ("onclick", function (){
Alert ("Clicked ");
})
Note that the first parameter of attachEvent () is "onclick" instead of "click ".
The main difference between the attachEvent () of IE and the addEventListener () of DOM0 is the scope of the event handler.
DOM0-level method. The event handler will run within the scope of the element to which it belongs;
In the attachEvent () method, the event handler runs in the global scope, so this is equal to window.
AttachEvent () can also add multiple event handlers to an element.
The Code is as follows:
Var btn = document. getElementById ("myBtn ");
Btn. attachEvent ("onclick", function (){
Alert ("clicked ");
})
Btn. attachEvent ("onclick", function (){
Alert ("Hello World! ");
})
Unlike the DOM method, these event handlers are not executed in the order of addition, but in the opposite direction.
The usage of detachEvent () is the same as that of removeEventListener.
--------------------------------------------------------------------------------
4. cross-browser event handlers
The Code is 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;
}
}
}
