Understanding of event objects, event source objects, and event flow in js

Analysis and understanding of event objects, event source objects, and event flow in js

Event

1. What is an event: an event refers to all events that can occur and are monitored in js, such as: (mouse, keyboard and browser window changes, etc.)
2. What is an event object (event): Generally speaking, it is an object that records various information about an event.
   It should be noted here that the event object will have compatibility issues. It is event in browsers other than IE, instead of window.event in browsers.

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

Event source object

To put it simply, it means that the event happened on that object. For element elements, the event source object refers to the element you clicked. There are also browser compatibility issues:

• Event.srcElement in fireFox
• 
  Refer to the event object for event.target compatible writing in IE

Event stream

The event flow is mainly divided into two categories: 1. Capture events 2. The trigger sequence of bubbling events is to capture first
and then bubbling, but if subdivided, there will be a target stage in the bubbling phase, that is, the specific operation of the dom element. Phase of operation

Capture event

The uppermost node receives the event first, and then propagates it down to specific nodes. Eg: When the user clicks on the div element and uses event capture, the click event will be propagated in the order of document>htm>body>div. The transfer method is from outside to inside.

Bubbling event

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

Event delegation

We bind the same event 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.

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

To bind click events to li, our usual approach is to loop to li field click events

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

And 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
• To improve performance, there is no need to loop all elements one by one to bind events.
• Flexible, new elements created dynamically do not need to re-bind events.

Prevent event bubbling and prevent default event

Operation to prevent event bubbling (compatibility writing)

***Some events do not require bubbling operation

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

Prevent default events (compatible writing)

***Prevent a tag and the right mouse button from default jump and menu events

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

For learning reference only