jquery Gets the event object for the Click event via event

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.