Detailed JavaScript event-driven programming _javascript tips

First, the basic overview
JS is an event-driven mechanism to respond to user actions, which means that when a user operates on an HTML element, it generates a time that drives certain functions to process.
PS: This way and the Java GUI in the event monitoring mechanism is very similar to the need to register the monitoring, and then processing monitoring, but the way to achieve different.

Second, the event-driven principle

• Event Source: Where the event occurs (HTML element)
• Events: Click/mouse operation/keyboard operation, etc.
• Event object: When an event occurs, an event object may be generated that encapsulates the information for that time and passes to the event handler
• Event handlers: code that responds to user events

Case:

• JS Event Classification
  
• Mouse events
• Click DblClick MouseDown mouseout mouseover MouseUp MouseMove etc.
• Keyboard events
• KeyDown keypress KeyUp etc.
• HTML events
• Window's onload unload Error abort text box, select Change, and so on
• Other events
• Events generated during the running of some special objects in the page
  

Case 1: Monitor mouse click events and be able to display the location of the mouse clicks X,y

After clicking on the browser, display coordinates (some browsers may not be valid)

Case 2: Click on the button, the picture turns red, black
method: JS access to the internal CSS

JS how to access CSS properties to change appearance 
 
 

Method: JS access to external CSS (this method does not necessarily apply to all browsers)

Event2.css
. style { 
  border:1; 
  background-color:red; 
  width:300px; 
  height:300px; 
} 
event2.html
 
 

Case 3: What is the kernel that distinguishes the current browser?  (District divides ie6/7/8/ Firefox, etc.)

<script language= "JavaScript" > 
   if window. XMLHttpRequest) 
   {//mozilla, Safari, Ie7,ie8  
      if (!window. ActiveXObject) 
    {  //Mozilla, Safari,  
      alert (' Mozilla, Safari ');  
    } 
     else 
     {  
      alert (' IE7.8 ');  
    }  
   } 
   else  
   {  
     alert (' IE6 ');  
   }  
</script> 

Case 4: An event can be monitored by multiple functions

Case 5: Prevent users from clicking the right mouse button to copy the content of the page, select the content of the page

The next article for you to share a simple comprehensive case: a simple calculator , I hope you do not miss.

About JavaScript event-driven programming is much more than that, and I hope this article will help you learn about JavaScript programming.