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

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

• What is an event 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}

To put it simply, it refers to the specific object on which the event occurred. For element elements, the event 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
  Compatible writing method refers to the event object

event stream

Event flows are mainly divided into two categories: 1. Capture events 2. Bubbling events. The order of triggering is to capture first and then bubble. But if it is subdivided, there will be a target stage after the bubbling stage is captured, that is, the DOM element that is specifically operated. stage of operation to be carried out

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.

bubbling events

Contrary to the capture event, it is passed from the inside out. 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 delegation

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")
            }
        }

The way to use event delegation is

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

• advantage
• Improve performance, no need to loop through all elements to bind events one by one.
• Flexible, new elements can be dynamically created without rebinding events.

Operation to prevent event bubbling (compatibility writing)

***Some events do not require bubbling operations

 function stopBubble(event){
    var e = event||window.event //Event object compatible writing method e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //IE compatible writing method}

Block default events (compatible writing method)

***Block a tag 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 a detailed explanation of the event object, event source object and event stream in js. For more information, please pay attention to other related articles on the PHP Chinese website!