JavaScript Event Flow Detailed

1. Event Flow

describes the order in which events are accepted from a document page.

Bubbling event Flow: The event is initially received by the most specific element (the node with the deepest nesting level in the document) and then propagated up to the least specific node (document).

Capture event Flow: Less specific nodes should receive events earlier, and the most specific nodes receive the event at the end.

2. Event Handlers

(1) HTML event handlers

(2) DOM0 level event handler

A more traditional approach: Assigning a function value to an event handler's property. This method is used more, mainly because it is simple and supports cross-browser;

(3) DOM2 level event handler

The events at the DOM2 level define two methods: the actions that are used to handle the specified and deleted event handlers. AddEventListener () and RemoveEventListener () two methods, respectively, receive three parameters: the event name to be processed (none ' on '), the function that is the event handler, the Boolean value (bubbling or capturing)

DOM0, DOM2 levels can add multiple events and multiple event handlers to an element, where multiple event handlers are executed in the order in which they were added.

(4) IE Event Processing program

Add Event attachevent () and delete event detachevent (), respectively, to receive two parameters: the name of the event handler (with ' on ') and the function of the event handler;

Browsers that support IE event handlers are: IE and opera

The reason for not using the third parameter is that IE8 and earlier browser versions only support event bubbling.

(5) Cross-browser event handlers

Appropriate use of the ability to detect, what kind of ability you have to use what kind of ability

3. Event ObjectWhen an event is triggered on the DOM, an event object is generated. The event object will only be present during the execution of a handler, and the event object will be destroyed as soon as the handler execution completes. (1). Event objects in the DOM (the DOM-compatible browser passes an event object into the events handler)①, type property: Used to get the event type;②, target property: Used to get the event target;③, Stoppropagation () method: Used to prevent event bubbling;④, Preventdefault () method: The default behavior of blocking events; (2). Event objects in IE ①, type property: Used to get the event type;②, srcelement attribute: Used to obtain the target of the event;③, cancelbubble properties: Used to block event bubbling;④, returnvalue properties: The default behavior used to block events; 

JavaScript Event Flow Detailed