A detailed explanation of event objects, event source objects and event streams in js

Event object, event source object, event flow analysis and understanding in js

Event object (event)

• What are events: Events refer to all events that can occur in js and are monitored, such as: (mouse, keyboard and browser window changes, etc.)

• What are events Object (event): In layman's terms, it is an object that records various information about the event.
  What needs to be noted here is that the event object will have compatibility issues. In browsers other than IE, it is event, but in non-browsers it is window.event,

btn.onclick = function(event){let e = event || window.event}

Event source object

Simply put, it means that the event specifically occurs on that object. For the element element, the event The source object refers to the element you clicked. There are also browser compatibility issues:

• In fireFox it is event.srcElement
• In IE it is event.target
  For compatible writing methods, refer to the event object

Event flow

Event flow is mainly divided into two categories: 1. Capture event 2. Bubbling event triggering order is to capture first and then bubble
But if it is subdivided, there will be a target stage when the bubbling stage is captured, that is, the operation stage for the specific DOM element to be operated

Capture events

The uppermost node first receives the event, and then propagates it downward to the specific node. eg: When the user clicks on the p element and uses event capture, the click event will be propagated in the order of document>htm>body>p. The mode of transmission is from outside to inside.

Bubble event

Contrary to capture event, it is passed from inside to outside. When the user clicks p, it will be passed to the parent, p>body>html . ***Because this feature is often used for event delegation.

Event Delegate

We bind the same events to be triggered by all child elements to the parent element, which can reduce DOM operations and improve performance. The specific usage method is to use the event source object method.

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

To bind click events to li, usually our approach is to loop through the click events to li

 let oLi = document.querySelectorAll("li")
 for(let i; i < oLi.length; i++){
            oLi[i].onclick = function(){
                console.log("i")
            }
        }

and the method of using event delegation is

let oUl = document.querySelector("ul")
  oUl.onclick = function(event){
            let e = event || window.event
            console.log(e.target.innerHTML)
        }

• Advantages
• Improve performance, no need to loop through all elements to bind events one by one.
• Flexible, new elements created dynamically do not require rebinding events.

Prevent event bubbling and prevent default events

Operation to prevent event bubbling (compatibility writing)

***Some events do not require bubbling operations

function stopBubble(event){
    var e = event||window.event //事件对象兼容写法
    e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //IE兼容写法}

Block default events (compatible writing)

***Block a Tags and right mouse button default jump and menu events

function cancelHandle(event){
    var e = event||window.event
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

Related recommendations: [JavaScript Video Tutorial]

The above is the detailed content of A detailed explanation of event objects, event source objects and event streams in js. For more information, please follow other related articles on the PHP Chinese website!