Event object, do you know it well?

Remember the last time you used the event object?
I guess it must be used to get the target or to prevent the event from bubbling.

event.stopPropagation()copy code

After reading some code and articles recently, I found that the Event object is not as simple as imagined, of course, it is still very simple, and it has more rich uses!

Foreword

The Event object is the event object, which is generated after the event occurs and passed to the listener function as a parameter.It is a constructor natively supported by browsers, and all events are instances of this object

const event = new Event(type, options)copy code

The Event constructor accepts two parameters, the first parameter is the name of the event, and the second parameter is a configuration object with three main properties

• bubbles: whether to bubble
• cancelable, whether the event can be cancelled, that is, can the event be cancelled by preventDefault
• composed, does the listener fire outside the DOM root node

The default values ​​of the above properties are all false
Next, an event is created through the constructor method. We can use dispatchEvent to trigger this event

const event = new Event('watch',{'bubbles': true,'cancelable': false})document.dispatchEvent(event)copy code

Instance attributes

Event.eventPhase

The

Event.eventPhase property returns an integer constant representing the current phase of the event

const phase = event.eventPhasecopy code

The return value has 4 states

• 0 event did not occur
• 1 Event is in capture phase,
• 2 event reaches target node
• 3 The event is in the bubbling phase

Event.cancelable & Event.cancelBubble

Event.cancelable Returns a boolean value, indicating whether the event can be canceled.
Most events can be canceled, but the events generated by the Event constructor cannot be canceled by default.

const evt = new Event('foo');evt.cancelable // falsecopy code

It is worth mentioning that when cancelable returns false, using event.preventDefault() will have no effect
Event.cancelBubble also returns whether it is currently blockedBubbling, set to true is the same as executing stopPropagation

Event.currentTarget & Event.target

After the event occurs, it will go through two stages of capture and bubbling, and pass through multiple DOM nodes in turn.

• event.target indicates the node that triggered the event initially, and will not change as the event propagates
• event.currentTarget indicates the node that the event is currently passing through, that is, the node where the current listener function is located, and the value will change

In the process of event propagation, the values ​​of the Event.target and Event.currentTarget properties inside the listener functions of different nodes are different.

Event.type

Returns the type of event, specified when the event is generated, read-only property

const event = new Event('ljc')event.type // 'ljc'copy code

Event.timeStamp

Returns the timestamp of the event, relative to when the page was loaded successfully

const evt = new Event('ljc');evt.timeStamp // 111.11copy code

The precision of the returned value depends on the settings of the browser
We can use this property to calculate the speed of the mouse movement, how many pixels per second

Event.detail

This property is only available for browser events and returns a value.It depends on the type of event, such as

• Click event, detail returns the number of times the mouse is pressed (1 means single click, 2 means double click, 3 means triple click)
• The scroll wheel event, detail returns the distance of the scroll wheel in the positive direction, or the distance in the negative direction, the return value is a multiple of 3

Event.isTrusted

Indicates whether the current event is generated by real user behavior. For example, if the click event is generated by the user, it will return true
The event generated by the Event constructor will return false

Instance methods

preventDefault & stopPropagation

Prevent default events
Prevent bubbling

stopImmediatePrapagation

The

Event.stopImmediatePropagation method prevents other listener functions for the same event from being called, regardless of whether the listener function is defined on the current node or another node.That is, this method stops the propagation of the event more thoroughly than Event.stopPropagation() .
If the same node specifies multiple listener functions for the same event, these functions will be called sequentially according to the order in which they were added.As long as one of the listener functions calls the Event.stopImmediatePropagation method, the other listener functions will not be executed.

function l1(e){e.stopImmediatePropagation();}function l2(e){console.log('hello world');}el.addEventListener('click', l1, false);el.addEventListener('click', l2, false);copy code

The above code is on the el node, adding two listener functions l1 and l2 for the click event.Since l1 calls the event.stopImmediatePropagation method, l2 will not be called.

composedPath

Returns an array containing the deepest node of the event and all the upper nodes that bubbled through in turn

const div = document.querySelector('div')div.addEventListener('click', (e) => {console.log(e.composedPath())})// [a, div, body, html, document, window]copy code

The deepest point of the click node is the a node, and the top layer is the window, so the path is from a to window

---

The above is the whole content of this article, I hope it will give you a better understanding of the Event object!