Event Object Small Note

The properties of the event object provide details about the event and through the method of the event object, you can control the continuation propagation of events and the default behavior of blocking events

The 2-level DOM events standard defines a standard event model that is implemented in the standard event model by all modern browser implementations except IE, where event objects are passed to event handle functions, and some of the properties that occur when events are handled and some behavior of control events (bubbling and Default behavior) in the standard event mode Type, the various sub-interfaces of the event define additional attributes, that is, you can define multiple kinds of event objects, and IE has only one event object applied to all events handling

Supported methods for Level 2 DOM event objects

Property	Describe
Bubbles	Specifies whether the event bubbles
Cancelable	Whether to cancel the default behavior of the event
Currenttarget	Returns the element that the event listener triggered the event
Eventphase	Returns the current stage of event propagation
Target	The target node of the event
TimeStamp	Returns the time and date the event was generated
Type	Returns the time name represented by the event

Distinguishing between Currenttarget and target in the DOM event stream is an event capture and event bubbling that combines two event streams

    < Div >        < Button > Test</button>    </div> 

For example, the above structure responds to the Click event of the button by propagating the event at the time of the capture phase from the outer div down. Phase is the event that propagates 1 to the target node at this time. Phase is 2.

And then bubbling up to the outer div at this point the event.phase is 3 the element that triggered the event is the element that Event.target actually handles the event is event.currenttaget also the above example is possible for the BTN click event Processing a trigger event on a sub-outer div in the capture phase is a click of the button (Event.target) that handles the outer div (event.currenttarget) Specific examples please see this blog

JS Event Little Note

Supported methods for Level 2 DOM event objects

Method	Describe
Inievent	Initialize the newly created event object properties
Preventdefault	Default behavior for blocking events (the Cancelable property of the event object)
Stoppropagation	Prevent further propagation of events

Here's Preventdefault () and stoppropagation () well understand the main introduction under the Initevent () method This method is used to initialize the properties of the new event object new event object? First Jump Down

A new event object can be created by Document.createevent (EventType)

Parameters	Event interface	Initialize method
Htmlevents	Htmlevent	Initevent
Mouseevents	MouseEvent	Initmouseevent
Uievents	Uievent	Inituievent

That is, we want to create a new HTML event object that can be used in this way

    var evt = document.createevent (' htmlevents ');

Once we have created a new event object, we can set the properties of the event (about Uievents is not very familiar with welcome communication) Jump back

After the new event event object has been created, call the Inievent () method to initialize the properties of the new Events object Inievent (eventtype,canbubble,cancelable)

Parameter 1 Event Type Click Parameter 2 whether the bubble parameter 3 cancelable can cancel the default behavior by Preventdefault ()

After the new event object is created, it is necessary to assign the composition event you just created by using the Element.dispatchevent (event) method (that is, triggering the events we just created on a specific element)

The following is a complete example to illustrate the use of the above method

There is such a hyperlink in the page

<href= "https://www.baidu.com"  ID= "Test"> Baidu</a>

The corresponding JS is as follows

    var btn = document.getElementById (' test ');    Btn.addeventlistener (' click ',function(e) {      console.log (1);      E.preventdefault ();    }) Listen for the Click event    on the hyperlink var evt = document.createevent (' htmlevents ');  Create a new Event object    evt.initevent (' click ',false,true);  Configuring the newly created event object   Here the setting is not bubbling  can be canceled by Event.preventdefault () default behavior    btn.dispatchevent (EVT);//assigning events on BTN   

In the page, you can see that the click event in response to the dispatch and no jump to the page

So when the third parameter of Initevent () is set to False

    var btn = document.getElementById (' test ');    Btn.addeventlistener (' click ',function(e) {      console.log (1);      E.preventdefault ();    })     var evt = document.createevent (' htmlevents ');    Evt.initevent (' click ',false, false);  This is configured to not remove the default behavior    btn.dispatchevent (evt) by Event.preventdefault ();

Will find the same response to the Click event but the page has a jump that is event.preventdefault () does not work in this case call Event.preventdefault () does not make an error but it just doesn't work

Event Object Small Note