To understand the JS event mechanism, there are several concepts that must be understood: Event object, event source, and event flow
Event object:
When an event occurs, an event object is generated, and the event object is used to record that "event occurrence is related to information." Note that event objects only occur when an event occurs, we cannot create it manually, and the event object is accessible only within the handler, and the object is automatically destroyed when the handler is allowed to end.
How do you understand that??
<script> = function (EV) { var e = EV | | window. Event; var div = document.getElementById ('div'); " ClientX: "+ E.clientx; } </script>
As in the code, when the OnMouseMove event occurs, an event object is generated, that is, in the program's event object, we can only access the event object in this anonymous function, is not accessible outside the function, also we can not manually create this event object;
How do I get the event object??
var e = Event | | window.event; This sentence is defined as a variable to get the event object, because different browsers get the event object is a little less the same way, IE is window.event, the standard is the event, in order to be compatible so write the event | | Window.event.
Event objects are also divided into:
Mouse Event object, keyboard event object, and so on, as the name implies mouse event occurs when the mouse event object, keyboard event occurs when the keyboard event object; Since it is an object, there must be some attribute methods.
Common Properties on the mouse event object:
Clientx,clienty,screenx,screeny,offsetx,offsety
The properties on the keyboard event object are:
KeyCode: Used to obtain the keyboard code, such as the space of the keyboard is 32, enter 13 and so on
Cltkey: Determines if the ALT key is pressed, is true, and vice versa false
Ctrlkey: Determines if the Ctrlkey key is pressed, is true, and vice versa false
Shiftkey: Determines if the Shiftkey key is pressed, is true, and vice versa false
Speaking of this, I believe you should understand the "event object"! Then talk about the source of the event.
Event Source:
In the event, the element of the current operation is the source of the event. For example, the page element a tag and input have the OnClick event, when clicked a occurs the OnClick event, the event source is a tag, when clicked input Send Onclic event is, the event source is input.
How do I get the event source??
IE under: window.event.srcElement
Standard under: Event.target
Thus, we are getting the event source through the event object.
For example: Click on the outside of a div to make the div disappear
$ (document). Click (Function (Event) { if($(Event. Target). attr ("class") !="Unitname") { if($("#showDiv"). CSS ("Display") =="Block") { $("#showDiv"). CSS ("Display","None");//Click outside to hide the name hint box } } })
To view the target of an event:
jquery Gets the event object for the Click event via event