Javascript DOM advanced programming 4.2 Event Type-I want to stick to it!

Object event

• Load and unload (call load when loading the page, and call unload when closing the page)
• Abort and error

When an error occurs during image loading, you can use the error event listener to describe it:

Ads. addevent (window, 'load ', Function  (){  //  Create an Image Element      VaR Image = Document. createelement ('img' );  //  Add an image to the document body after loading it Ads. addevent (image, 'load ',Function  () {Document. Body. appendchild (image );});  //  If an error occurs during loading, add the corresponding information. Ads. addevent (image, 'error ', Function  (){  VaR Message = Document. createtextnode ('the image failed to load' ); Document. Body. appendchild (Message );});  //  Set the src attribute of the image so that the browser can obtain the image      //  You can add any image URL here. Image. setattribute ('src', 'HTTP: // advanceddomscripting.com/images/working.jpg' );  //  Except that the image below does not exist and a loading error occurs, it is the same as the image above.      VaR Imagemissing = Document. createelement ('img' ); Ads. addevent (imagemissing, 'Load ', Function  () {Document. Body. appendchild (imagemissing) ;}); ads. addevent (imagemissing, 'Error ', Function  (){  VaR Message = Document. createtextnode ('imagemissing failed to load'); Document. Body. appendchild (Message );});  //  You can add any image URL here. Imagemissing. setattribute ('src', 'HTTP: // advanceddomscripting.com/images/missing.jpg' );}); 

• Resize event (this event is called when the window size is adjusted)
• Scroll event (applicable to elements with the overflow: auto style and called continuously during element scrolling .)

Move mouse event

• Consecutive call of mousemove when the mouse moves
• Move to new object Mouseover
• Remove new object mouseout

 

Ads. addevent (window, 'load ', Function  (W3cevent ){  //  One event type and Object      //  Method for logging to the log window      Function  Logit (w3cevent ){  Switch ( This  . Nodetype ){  Case  Ads. node. document_node: ads. log. Write (w3cevent. typp + 'On document' );  Break  ;  Case  Ads. node. element_node: ads. log. Write (w3cevent. Type + 'On box' );  Break  ;} Ads. addevent (document, 'Mousemove' , Logit); ads. addevent (document, 'Mouseover' , Logit); ads. addevent (document, 'Mouseout' , Logit );  VaR Box = Document. getelementbyid ('box' ) Ads. addevent (box, 'Mousemove' , Logit); ads. addevent (box, 'Mouseover' , Logit); ads. addevent (box, 'Mouseout' , Logit );}); 

Mouse Click Event

• When pressed, mousedown
• Mouseup when lifting
• Click occurs only when the mouse does not move.
• Double-click dblclick

Ads. addevent (window, 'load ', Function  (W3cevent ){ //  One event type and Object      //  Method for logging to the log window      Function  Logit (w3cevent ){  Switch ( This  . Nodetype ){  Case  Ads. node. document_node: ads. log. Write (w3cevent. typp + 'On document' );  Break  ; Case  Ads. node. element_node: ads. log. Write (w3cevent. Type + 'On box' );  Break  ;} Ads. addevent (document, 'Mousedown' , Logit); ads. addevent (document, 'Mouseup' , Logit); ads. addevent (document, 'Dblclick' , Logit );  VaR Box = Document. getelementbyid ('box' ) Ads. addevent (box, 'Mousedown' , Logit); ads. addevent (box, 'Mouseup' , Logit); ads. addevent (box, 'Click' , Logit); ads. addevent (box, 'Dblclick' , Logit );}); 

Keyboard Events

• Keydown is called when a keyboard is pressed.
• It is called when the corresponding key of the keyup event is released.
• The keypress event follows the keyup event.

Form-related events

• Submit and reset events

Here is a JSCodeIt is very easy to verify the zip code of Canada, so just look at the code.

 Function Ispostalcode (s ){  Return S. touppercase (). Match (/[A-Z] [0-9] \ s * [0-9] [A-Z] [0-9]/ I);} ads. addevent (window, 'Load ', Function  () {Ads. addevent (document. getelementbyid ( 'Canadianaddress' ), 'Submit' ,  Function  (W3cevent ){  VaR Postalcode = Document. getelementbyid ('postalcode' ). Value; //  Use regular expressions to check whether the format is valid              If (! Ispostalcode (posalcode) {alert ( 'That \'s not a valid Canadian postal code! ' );  //  Submit Form  Ads. preventdefault (w3cevent );}});}); 

• Blur and focus events

The focus event will be called when you place an element on a single machine or switch to an element by pressing the tab key, while the tab key is used to exit the element outside the single element, the Blur event will be called on the original focus event element.

Add the loading event listener of The Blur and focus listeners to the zip code field.

Ads. addevent (window, 'load ', Function  (){  //  Add an initial Style      VaR Postalcode = Document. getelementbyid ('postalcode' ); Postalcode. classname = 'Inputmissing' ;  //  Modify the class to edit when getting the focus. Ads. addevent (postalcode, 'focal ', Function  (W3cevent ){  //  Modifying the class indicates that the user is editing this field.         This . Classname = 'inputditing' ;});  //  When the focus is lost, the information is verified and the style is modified based on whether the input value is valid. Ads. addevent (postalcode, 'blur ', Function  (W3cevent )){  If ( This . Value ='' ){  //  Modify the class to indicate that the content is missing              This . Classname = 'inputmissing' ;} Else   If (! Ispostalcode ( This  . Value )){  //  Modify the class to indicate that the content is invalid.              This . Classname = 'inputvalid' ;}  Else  {  //  The style is modified to indicate that the content is complete.              This . Classname = 'inputcomplete' ;}}}); 

• Change event

Applicable to <input>, <SELECT>, <textarea> form elements. This event is called when you modify the value of an element between focus and blur after the focus event occurs.

 //  The content of other fields in the form can be automatically generated when the form is verified. Ads. addevent (window, 'load ', Function  (){  VaR Postalcode = ads. $ ('postalcode' ); Ads. addevent (postalcode, 'Change ', Function  (W3cevent ){  VaR Newpostalcode = This  . Value  If (! Ispostalcode (newpostalcode )){  Return  ;}  VaR Reg = New  XMLHttpRequest (); Req. Open ( 'Post', 'server. js? Postalcode = '+ newpostalcode, True  ); Req. onreadystatechange = Function  (){ If (Req. readystate = 4 ) {Eval (req. responsettext );  If (Ads. $ ('street '). value ='' ) {Ads. $ ( 'Street '). value = Street ;}  If (Ads. $ ('city'). value ='' ) {Ads. $ ( 'City'). value = City ;}  If (Ads. $ ('province '). value ='') {Ads. $ ( 'Province '). value = Province ;}}req. Send ();});});