This article will record the following knowledge points

  • DOM capture phase and bubble phase
  • Ways to stop bubbles
  • Event delegation
  • The target and the currentTarget

DOM capture phase and bubble phase

DOM Event flow: The event flow describes the order in which events are received from the page. (Event propagation process is event flow)

There are three stages:

Event capture Phase The main purpose of this phase is to capture and intercept events

In general, the phase has a dual scope, that is, the end of the capture phase, the beginning of the bubble phase;

The event bubbling phase is mainly used to return the result of the execution of the binding event of the target element to the browser, and to deal with the differences between different browsers. This phase is mainly completed in this phase

Capture When a user clicks a button, the browser traverses the window from top to bottom to each button the user clicks, firing event handlers one by one.

The bubble browser iterates from the button clicked by the user to the window, firing event handlers one by one.

What is the capture phase?

The capture phase occurs when the third argument to the listener event addEventLister is true

** Event capture phase: ** If there is an event at the upper level, the event at the upper level will be executed first, and then the click event will be executed (the order of execution is: grandpa event — > Dad event — > son event)

What is the bubbling phase?

The third parameter is left blank or false

** Event bubble phase: ** Execute the clicked element event first, and then execute the superior events one layer at a time (execution order: clicked event — > Dad event — > Grandpa event)

Do you want to do the bubble phase and capture phase?

* : baba.attachevent ('onclick', fn) // Capture netscape: baba.addeventListener ('click'; Fn) // Now the W3C standard is used. The third parameter controls whether to bubble or capture. , fn, bool)Copy the code

Ways to stop bubbles

To interrupt bubbles, use e.topPropagation ()

But there are some events that this method does not work for, such as scroll events

Methods to prevent scrolling events

To prevent scroll action, you need to prevent whell and TouchStart default action

Disable scroll events

Elements. The addEventListener ('whell'.(e) = >{
	e.preventDefault()
})
Copy the code

At this point the use of the mouse wheel is useless, but there is a scroll bar to hide the scroll bar

::-webkit-scrollbar {
	width: 0! important }Copy the code

Disable scrolling events on mobile

Elements. The addEventListener ('touchstart'.(e) = >{
	e.preventDefault()
})

Copy the code

Event delegation

When listening on a child element, the event bubble is passed up through the target element to the parent, up to document. If the child element is uncertain or dynamically generated, you can listen on the parent instead of the child element.

        function on(eventType, element, selector, fn) {
            if(! (elementinstanceof Element)) {
                element = document.querySelector(element)
            }
            element = addEventListener(eventType, (e) = > {
                const t = e.target
                if (t.matches(selector)) {
                    fn(e)
                }
            })
        }
        on('click'.'#div1'.'button'.() = > {
            console.log('Buton has been clicked')})Copy the code

The target and the currentTarget

Target is the element that is being manipulated (clicked)

CurrentTarget is the element the programmer listens to