JavaScript Event Object

Source: Internet
Author: User

When an event is triggered in JS, an event object is generated, that is, the events in the function handler, through which we can access all the information related to the event, such as the type of event, the event object, and so on. It is important to note that the event object IE and non ie are supported in different ways.

Event objects in the DOM

The event handlers pass in an event, whether they are bound events in the tag, the DOM0 level, or the DOM2 level.

<button id="myBtn" onclick="alert(event.type)">按钮1</button>...var btn = document.getElementById("button"function(event){    alert(event.type);};btn.addEventListener("click"function(event){    alert(event.type);});

When you click the button, the type of event is Event.type, that is, click.
The properties and methods that are in the event are as follows:

Properties/Methods type Read/write Description
Bubbles Boolean Read-only Whether the event bubbles
Cancelable Boolean Read-only Whether the default behavior of an event can be canceled
Currenttarget Element Read-only The element in which the event handler is currently processing events
defaultprevented Boolean Read-only A value of TRUE indicates that Preventdefault () has been called (New in DOM3-level event)
Detail Integer Read-only Event-specific details
Eventphase Integer Read-only The stage in which the event handler is invoked: 1 for the capture phase, 2 for "in Target", and 3 for the bubbling phase
Preventdefault Function Read-only Cancels the default behavior of the event. This method can be used when cancelable is true
Stopimmediatepropagation Function Read-only Cancels further capture or bubbling of events while preventing any event handlers from being called (New in DOM3-level events)
Stoppropagation Function Read-only Cancels further capture or bubbling of the event. This method can be used when bubbles is true
Target Element Read-only The goal of the event
Trusted Boolean Read-only True to indicate browser generation, false to indicate that the event was created by the developer via JavaScript (new in DOM3 level event)
Type String Read-only The type of event being triggered
View Abstractview Read-only The abstract view associated with the event. Equivalent to the Window object where the event occurred
Target and Currenttarget

First notice the presence of target and Currenttarget in the event, which represents the target of the incident, which is the original target of the event firing, which represents the target of the current event (because the event is captured or bubbled, so it is not necessarily the original target of the event)
The two are the same when the event handler is on the target element.

vardocument.getElementById("button"function(event){    console.log(this === event.target);  //true    console.log(this === event.currentTarget);  //true}

But if BTN is inside a div, now add the listener to BTN's parent node:

<div  id  = "Btnwrap" ;  <button  id  =  "button"  onclick  = "alert (event.type)" ;  button Span class= "Hljs-tag" ></button ;  </div ;   
vardocument.getElementById("btnWrap"function(event){    console.log(event.target=== btn);  //true    console.log(event.currentTarget=== btnWrap);  //true}

When the button is clicked, the event is passed from the button to Btnwrap, and in the Btnwrap event handler, the original target of the event is BTN, but the current processing event is btnwrap.

Cancelable and Preventdefault ()

To prevent the default behavior of a feature event, you can use the Preventdefault method, which is typically the default behavior of the A tag, which is to open the URL specified by its href attribute, and if you want to block this behavior, call the Preventdefault method in the OnClick event handler.

var link = document.getElementById("myLink"function(event){    event.preventDefault();}

It is important to note that only events that are cancelable true can use the Preventdefault method to cancel the default behavior.

Stoppropagation ()

Stoppropagation can immediately stop the propagation of an event in the DOM, such as having some small buttons in a div, bubbling from the event, and also triggering a DIV event when the small button is clicked, in order to prevent this situation from using stoppropagation ().

var btn = document.getElementById("button"function(event){    event.stopPropagation();}var btnWrap= document.getElementById("btnWrap"function(event){    console.log("事件到达!");  //不会输出}
Event objects in IE

Unlike event objects in the DOM, an event object in IE has different properties and is accessed in different ways.
In IE, events bound by DOM0-level events, event is not a local variable, but it exists as a property of window.

var btn = document.getElementById("button"function(event){    alert(event.type);   //出错!function(){    alert(window.event.type);   //输出click}

However, if the event is added via attachevent or is directly bound, it is a local variable as in the DOM and can be accessed directly.

<!--输出‘click‘--><button id="button" onclick="alert(event.type)">按钮1</button>...var btn = document.getElementById("button");btn.attachEvent("onclick"function(event){    alert(event.type);   // 输出‘click‘});

As in DOM, the event in IE also has some events-related properties, as follows

Properties/Methods type Read/write Description
Cancelbubble Boolean Read/write The default value is false, but setting it to true cancels event bubbling (the same as the Stoppropagation () method in the DOM)
ReturnValue Boolean Read/write The default value is true, but setting it to false cancels the default behavior of the event (same as the Preventdefault () method in the DOM)
Srcelement Element Read-only The target of the event (same as the target property in the DOM)
Type String Read-only The type of event being triggered
Srcelement

The previous blog mentions that in IE's Attachevent method class, this is not the element that points to the current triggering event, but rather the global variable window, so it is best to use Event.srcelement in the event handler.

var btn = document.getElementById("button"function(){    this);  //true}btn.attachEvent("onclick"function(){    this);  //false}
ReturnValue

The returnvalue action is similar to the Preventdefault () method in the DOM, and assigning it to false can prevent the event from default behavior.

btn.attachEvent("onclick"function(){    false;}
Cancelbubble

The cancelbubble action is similar to the Stoppropagation () method in the DOM, and assigning it to true prevents the event from bubbling further.

btn.attachEvent("onclick"function(){    true;}
Writing cross-browser event objects

Similar to the event handlers mentioned in the previous blog, event objects also need to be processed across browsers, providing a unified approach based on the different implementations of DOM and IE.

varEventutil = {//Add events, see previous blog postAddHandler: function(element, type, handler){},//removing events, see previous blog postRemoveHandler: function(element, type, handler){},//Get Event objectGetEvent: function(event){        returnEvent?    Event:window.event; }//Get Event Trigger elementGettarget: function(event){        returnEvent.target | |    Event.srcelement; }//Block event default eventPreventdefault: function(event){        if(Event.preventdefault)        {Event.preventdefault (); }Else{Event.returnvalue =false; }    }//block event capture or bubbling (only bubbling exists in IE)Stoppropagation: function(event){        if(event.stoppropagation)        {event.propagation (); }Else{event.cancelbubble =true; }    }}

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

JavaScript Event Object

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.