JavaScript Event Object

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