Describe the W3C event flow

Describe the w3c event flow

What is event flow? (Event model, event mechanism).
The response sequence of multiple node objects to the same event is called the event stream.

W3C event flow:

1. Execution capture stage: Netscape browser proposes that events are executed sequentially from the least precise object (document) to the most precise target element (target).
2. Execute the target event.
3. Execution bubbling stage: Internet Explorer proposes that events are executed sequentially from the most precise target element (target) to the least precise object (document).
4. The event determines in which stage it executes according to whether it is bubbling or capturing.

Comparison of window.onload and DOMContentLoaded

1. Window's onload event: it can only be triggered
   when the DOMnode has been loaded and all resources have been loaded.

2. DOMContentLoadedEvent:
   When the DOM node is loaded, it will execute and no longer wait for resources.
   The DOM2function binding must be processed in advance for the event of the level.

Talk about DOM0 and DOM2 binding events separately

• DOM0Dynamic binding: The anonymous function is directly assigned to the event attribute of the DOM object, and the anonymous function will be executed when the event is triggered.

Features:

1. The same event can only be bound to the same element once, otherwise it will be overwritten.
2. Only bubbling can be performed.

Cancel event:

Simply assign the value of the event attribute to null.

• DOM2Event handler: w3c provides an event handler addEventListener()designed to handle the event.

Features:

1. You can bind the same event multiple times to the same element.
2. Can control bubbling and capture.

Delete event:

How to use removeEventListener()it.

scenes to be used:

1. Binding the same event to the same element multiple times does not want to be overwritten.
2. Can control capture or bubbling.
3. DOM2 level events can only be bound through event handling functions ( DOMContentLoaded).

|| and the return value of the && operator?

1. || and && will first perform conditional judgment on the first operand, if it is not a Boolean value, perform Boolean coercion first, and then perform conditional judgment.
2. For ||, if the conditional judgment result is true, the value of the first operand is returned, and if it is false, the value of the second operand is returned.
3. && On the contrary, if the condition is true, it returns the value of the second operand, and if it is false, it returns the value of the first operand.
4. || and && return the value of one of their operands, not the result of conditional judgment.

Write a general event listener function

function (element, type, handler, method) {
    
    
        //DOM2级事件处理程序，false表示在冒泡阶段处理事件程序
        if (element.addEventListener) {
    
    
            element.addEventListener(type, handler, method || false);
        }
        //IE事件处理程序
        else if (element.attachEvent) {
    
    
            element.attachEvent("on" + type, handler);
        }
        //DOM0级
        else {
    
    
            element["on" + type] = handler;
        }
    }