JavaScript Foundation Hardening 4--Events

2.1 What is an event

Usually the action of a mouse or hotkey is called an event, and the action of a sequence of programs triggered by a mouse or hotkey is called event-driven. Handlers or functions for events, which we call event handlers.

2.2 Event handlers

Executes a specific JavaScript code (event handler) when an event occurs.

For example, click on a button on the page this is a very common event, the execution of the corresponding event handler, pop-up hints small window, the code is as follows:

function Click_button () {     //  event handler, Pop-up Cue window      alert (' Welcome to Shiyanlou ');    }   </script>
2.3 Common Events
In addition to the onclick events just mentioned, there are these common events:

 
 

  
  
 
   
OnClick Click
 
   
OnDblClick Double-click
 
   
onfocus Element gets focus
 
   
onblur Element loses focus
 
  
 
 
 
 

  
  
 
   
onmouseover mouse moves over an element
 
   
onMouseOut mouse away from an element
 
  
 
 
 
 

  
  
 
   
OnMouseDown the mouse button is pressed
 
   
OnMouseUp mouse button is released
 
  
 
 
 
 

  
  
 
   
OnKeyDown A keyboard key is pressed
 
   
OnKeyUp a keyboard key is released
 
   
onkeypress A keyboard key is pressed and released
 
  
 
 
The onmouseover and onmouseout events can be used to trigger a function when the mouse moves over an HTML element and moves out of an element. such as this example:
onmouseover= "this.innerhtml= ' good '"onmouseout= "This.innerhtml= ' you had moved out '" >move your Mouse to Here</div></body>
When the mouse is moved, the "good" is displayed, and when the mouse moves out, it displays "You are moved out":
OnMouseDown, onmouseup is the mouse down and release events. The onmousedown event is triggered first when the mouse button is clicked, and the OnMouseUp event is triggered when the mouse button is released. To illustrate:
functionMDown (obj)//event handlers for mouse presses{obj. style.backgroundcolor= "#1ec5e5"; Obj. innerhtml= "Release your Mouse"    }    functionMUp (obj)//release the mouse event handler{obj. style.backgroundcolor= "Green"; Obj. innerhtml= "Press Here"    }  </script>onmousedown= "MDown (This)"onmouseup= "MUp (this)" >press here</div></body>
The running result is visible, "release your mouse" is displayed when the mouse is pressed, the background turns blue, and when the mouse is released, it appears as "press here" and the background turns green.
JavaScript Foundation Hardening 4--Events