Javascript event object

Javascript event object

When an event is triggered in js, an event object is generated, that is, the event in the function processing program. With the event, we can access all event-related information, such as the event type and event occurrence object. Note that the event object IE and non-IE support methods are different.

Event object in DOM

Whether it is an event bound to a tag, or a DOM0 event or a DOM2 event, the event handler will pass in an event.

Button 1... Var btn = document. getElementById (button); btn. onclick = function (event) {alert (event. type) ;}; btn. addEventListener (click, function (event) {alert (event. type );});

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

Attribute/Method	Type	Read/write	Description
Bubbles	Boolean	Read-Only	Event bubble?
Cancelable	Boolean	Read-Only	Can I cancel the default event behavior?
CurrentTarget	Element	Read-Only	The element that the event handler is currently processing.
DefaultPrevented	Boolean	Read-Only	When the value is true, the table has already called preventDefault () (Added in DOM3 events)
Detail	Integer	Read-Only	Event-related details
EventPhase	Integer	Read-Only	Stage of calling the event handler: 1 indicates the capture stage, 2 indicates the target stage, and 3 indicates the bubble stage.
PreventDefault	Function	Read-Only	Cancels the default action of an event. This method can be used when cancelable is true.
StopImmediatePropagation	Function	Read-Only	Cancel further event capture or bubbling and prevent any event handler from being called (added in DOM3 events)
StopPropagation	Function	Read-Only	Cancel further event capture or bubbling. This method can be used when bubbles is set to true.
Target	Element	Read-Only	Event Target
Trusted	Boolean	Read-Only	True indicates that the browser generates the event. false indicates that the event was created by a developer using Javascript (added in DOM3 events)
Type	String	Read-Only	Type of the event to be triggered
View	AbstractView	Read-Only	Abstract view associated with the event. Equivalent to the window object in which an event occurs

Target and currentTarget

First, note that the event contains the target and currentTarget. The former indicates the event target, which is the original target triggered by the event, the latter represents the target of the current event (because the event will capture or bubble, it is not necessarily the original target of the event)
When the event handler is on the target element, the two are the same.

var btn = document.getElementById(button);btn.onclick = function(event){    console.log(this === event.target);  //true    console.log(this === event.currentTarget);  //true}

However, if btn is in a div, add a listener to the parent node of btn:

Button

var btnWrap= document.getElementById(btnWrap);btnWrap.onclick = function(event){    console.log(event.target=== btn);  //true    console.log(event.currentTarget=== btnWrap);  //true}

When you click the button, the event is uploaded from the button to btnWrap. In the btnWrap event processing program, the original target of the event is btn, but the current event is btnWrap.

Cancelable and preventDefault ()

You can use the preventDefault method to block the default behavior of a tag. Typically, the default behavior of a tag is to open the url specified by its href attribute. If you want to block this behavior, call the preventDefault method in The onclick event handler.

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

Note that the preventDefault method can be used to cancel the default action only for events whose cancelable is true.

StopPropagation ()

StopPropagation can immediately stop the propagation of events in the DOM. For example, if a Div contains some small buttons, The div event is triggered when the small button is clicked Based on Event bubbling, to prevent this, you can use stopPropagation ().

Var btn = document. getElementById (button); btn. onclick = function (event) {event. stopPropagation ();} var btnWrap = document. getElementById (btnWrap); btnWrap. onclick = function (event) {console. log (event arrival !); // No output}

Event object in IE

Unlike the event object in DOM, the event object in IE has different attributes and different access methods.
In IE, events bound through DOM0 events are not a local variable, but exist as an attribute of window.

Var btn = document. getElementById (button); btn. onclick = function (event) {alert (event. type); // Error !} Btn. onclick = function () {alert (window. event. type); // output click}

However, if the event is added through attachEvent or directly bound, it is a local variable like in the DOM and can be accessed directly.

  Button 1... Var btn = document. getElementById (button); btn. attachEvent (onclick, function (event) {alert (event. type); // output 'click '});

Like in DOM, events in IE also have some event-related attributes, as shown below:

Attribute/Method	Type	Read/write	Description
CancelBubble	Boolean	Read/write	The default value is false, but if it is set to true, event bubbling can be canceled (same as the stopPropagation () method in DOM)
ReturnValue	Boolean	Read/write	The default value is true, but if it is set to false, the default action of the event can be canceled (same as the preventDefault () method in DOM)
SrcElement	Element	Read-Only	Event target (same as the target attribute in DOM)
Type	String	Read-Only	Type of the event to be triggered

SrcElement

As mentioned in the previous blog, In the attachEvent method class of IE, this does not point to the element of the currently triggered event, but to the global variable window. Therefore, it is best to use event within the event handler. srcElement is relatively safe.

var btn = document.getElementById(button);btn.onclick = function(){    alert(window.event.srcElement === this);  //true}btn.attachEvent(onclick, function(){    alert(window.event.srcElement === this);  //false}

ReturnValue

The returnValue function is similar to the preventDefault () method in the DOM. assigning it to false can prevent default event behavior.

btn.attachEvent(onclick, function(){    window.event.returnValue = false;}

CancelBubble

The function of cancelBubble is similar to the stopPropagation () method in DOM. assigning it to true can prevent further event bubbles.

btn.attachEvent(onclick, function(){    window.event.cancelBubble = true;}

Compile cross-browser event objects

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

Var EventUtil = {// Add events. For more information, see addHandler: function (element, type, handler) {}, // Delete events. For more information, see removeHandler: function (element, type, handler) {}, // get the event object getEvent: function (event) {return event? Event: window. event;} // get the event trigger element getTarget: function (event) {return event.tar get | event. srcElement;} // The default event preventDefault: function (event) {if (event. preventDefault) {event. preventDefault ();} else {event. returnValue = false ;}}// prevents event capture or bubbling (only bubbles exist in IE) stopPropagation: function (event) {if (event. stopPropagation) {event. propagation ();} else {event. cancelBubble = true ;}}}