Event object in JavaScript

Source: Internet
Author: User

Event object, whenever an event is triggered, an event object is produced, which includes the basic properties of the event, the event type type (click, Dbclick equivalent), the target element targets (I understand the event source object, That is, the DOM element that triggered the event), and some of the methods associated with the event. Cancel the event default behavior Preventdefault (), organize events to continue bubbling or capture stoppropagation () and so on, here I just list the properties and methods I used in the project.

Now that the event is triggered. The result is an event object. I tested it in IE. There is no need to use the assignment, perhaps the lower version of the need for it, Firefox needs to be assigned to it, here I think the need to develop a habit. Thanks a line of code Bai. Each time an event object is used in an incident handler, it is used in a way that assigns a value:

var event = event| | window.event;

In fact, the first element in the default parameter array is the event object, that is, the ability to assign values to array elements

var event = arguments[0];

The Type property. Should be the easiest to understand, event type. Click clicking, double-click Dbclick, and so on

The target property, the DOM element object that triggers the event. I see the internet saying target is the Firefox browser. Srcelement is in IE, but the result of my test is. In the IE11 two are able to use, the same effect. However, Firefox can only use the target property, the implementation of the browser can have a common standard, compatibility is very tangled, so as with the event object, it is recommended to obtain the event by assigning the DOM object:

var target = event.target| | Event.srcelement;

The Preventdefault () method is used to cancel the default event behavior, such as hyperlinks, which click a hyperlink, and then jump to a page based on the href attribute. Previously in the project. There are a lot of default click behaviors that need to be canceled in the Click event handler. To cancel the default event behavior, such as the following actions:

if (Event.preventdefault) {//infers if the function exists     event.preventdefault;} else{     returnvalue = false;}

This also implements the default behavior of canceling hyperlinks, in fact in the project, also see other colleagues use other ways, also cancel is the default click behavior

<a href= "javascript:void (0);" > also line </a>

The Stoppropagation () method directly bubbles or captures the cancellation of the event, which is very useful, assuming that both the parent and child elements are bound to an event of the same type, for example, the Click event is bound. Now that the user has triggered an event, the event is triggered during the capture phase and will continue to be captured for the parent element. The event that triggers the child element. For child elements. The events that are triggered in the bubbling phase are also the same as the bubbling behavior that triggers the parent element. Therefore, it is often necessary to cancel such unintentional triggering.

if (event.stoppropagation) {//infer existence of      event.stoppropagation ();} else{      event.canclebubble = true;}


September 30, 2014 22:04:18

Maybe the project. Assuming that there are other related operations, I continue to add







Event object in JavaScript

Related Article

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.