For compatibility of javascript cross-browser development js events, see.
Simple event model and advanced event model
Simple event model and advanced event model simple events are the forms in which events are directly bound with page elements, such:
The Code is as follows:
Element. onclick = function () {alert (this. innerHTML );}
As long as you do not use events unique to individual browsers, the general click and mouseover events can be used in various browsers.
However, when an event needs to be bound to multiple listeners or needs to be dynamically registered/removed from the listener, the simple event model is not enough, you need to use the advanced event model (IE differs from other browsers when using the advanced event model ):
The Code is as follows:
// Register
Function addEventHandler (element, evtName, callback, useCapture ){
// DOM Standard
If (element. addEventListener ){
Element. addEventListener (evtName, callback, useCapture );
} Else {
// Ignore the useCapture parameter in IE Mode
Element. attachEvent ('on' + evtName, callback );
}
}
// Remove
Function removeEventHandler (element, evtName, callback, useCapture ){
// DOM Standard
If (element. removeEventListener ){
Element. removeEventListener (evtName, callback, useCapture );
} Else {
// Ignore the useCapture parameter in IE Mode
Element. dettachEvent ('on' + evtName, callback );
}
}
The Call Sequence Relationship Between The onclick event and the href attribute in the tag
When tag a responds to a click event, it first responds to the onclick event and then executes the redirection method in href. After clicking the following labels, "button" and "href" are displayed successively ":
Button
However, it is recommended that you do not define specific javascript methods in href, because this is the property of the link address that defines the jump. If you need to execute two javascript methods successively, write as follows:
Button
However, in the preceding writing method, if The onclick binding response method does not submit a request to jump to another page, the current page is refreshed, in the above Code, href = "#" indicates that the page is redirected to the top of the current page, but no new html request is sent. Sometimes, we do not want the page to jump back to the top after responding to The onclick event (especially when the page height is long and a scroll bar appears and the link is located at the bottom of the page, after you jump to the top, you also need to drag the scroll bar to retrieve the original position to continue the operation), then you should return the false value after onclick to prevent the href operation from continuing, such:
Button
Or replace # with an empty javascript statement:
Button
Onload event Call Sequence
Sometimes you need to call some scripts to set the initial status of page elements during page initialization. The most standard practice is to useMethod or document. onload method. The onload event is triggered after the page element is rendered. This ensures that no page element not rendered is found during script execution. IfWhen you execute the script in the script block of the region and use page elements, you may not be able to find the element. IfThe execution script in the script block of the region can only use the page elements before the script block, becauseThe elements of a region are parsed sequentially.
Onchange event
Element and OfAll elements support onchangge events, but we often find that the content value of the element changes but it does not trigger the onchangge event. This is because there is another condition for the onchange event to trigger: The current element is in the onblur state. Therefore, the onchange event can only capture value changes during user operations. It cannot be captured when the element value is dynamically changed using javascript scripts.Event Interception Because browsers other than IE cannot recognize window. event, you must use the following methods to obtain the target elements of the current event and event:Var evt = e? E :( window. event? Window. event: null );Var el = evt. srcElement? Evt. srcElement: evt.tar get;There are some other related articles, which are worth your reference.JavaScript Event Learning Chapter 1 Event IntroductionCross-browser javascript Event System
