3. Event model

1, define,

An event is an action that occurs in the browser when the user interacts with the browser. In essence, it is a communication mode between various components of the program. The events of today. Mostly DOM events

2. DOM event flow

The DOM structure is a tree structure. When an HTML element generates an event, the event is propagated in a certain order between the element node and the root node. The node through which the path passes is thrown back to receive events from that node. And then react accordingly. This process is called DOM events.

3. Two sequences of events

Event capture and event bubbling First let’s understand the three phases of event propagation: 1. Event capture phase 2. Event target phase 3. Bubbling phase

Bubble events: Events bubble from the bottom to the top, corresponding to the DOM tree, where the event is passed up the DOM tree by child nodes to an uncertain target element. The idea of bubble events is that the event starts with a specific target event to the most uncertain target

Capture events: from the top all the way to the target element, the topmost element of the DOM tree all the way to the most precise element,

Knowing both events, the DOM standard supports both event models, but capturing events takes precedence and both events start with document and end with document

4. Event listener function

A function called in response to an event is called an event handler. Each event corresponds to an event listener function. When the browser detects that an event has occurred, it automatically searches for the listener function corresponding to the event

Several types of event monitoring:

Note: Event: a native global event, which is essentially a constructor,

AttachEvent You can add multiple events to an element, Yo attachEvent two parameters the first parameter is the type of event (on) of the beginning of the second parameter is the eventListener callback handler removed attachEvent corresponding function is: datechEvent method

Note: The dateEvent method must have the same parameters as attachEvent

The addEventListener function has three parameters: the event type name (on is not required), the eventListener callback handler function, and the Boolean value false for the bubbling event and true for the capturing event

With event bubbling and event capture, there is a need to prevent event bubbling and prevent browser default behavior in practice

5. Stop the event bubbling

In two ways: 1, to wrote the window to trigger the click event functions. The event. The cancelBubble = true this approach and Google support, IE and firefox doesn’t support

2, pass an object argument to the event handler and add object arguments to the function.

Prevents the event from affecting upper-layer eventsfunction stopBubble(e) {     if (e.stopPropagation) { 
        e.stopPropagation(); 
    } 
    else { 
        // Use IE's stop event bubbling method
        //window.event.CancelBubble = true; 
        e.cancelBubble = true; }}Copy the code

6. Block the browser’s default behavior

JS browser default behavior and blocking behavior