Event capture and event bubbling

  • Grandpa => Dad => son looks for a listener function from the outside in, called event capture

  • Son => dad => Grandpa looks inside out for a listener function called event bubbling

Instead of avoiding repeated calls, the developer can choose to place event listeners in the capture phase or in the bubbling phase

Illustration:

Event binding API

addEventListenter

IE5: xx.attachEvent(‘onclick’, fn) / / the bubblingNetscape: xx.addeventListener (' click ', fn)/ / capture

W3C: xx addEventListener (' click ', fn, Boolean)// This bool is used to select bubble/capture.

Copy the code
  • ifboolIs empty or forfalsy, that is to useThe bubbling;
  • ifboolfortrueUse thecapture.

Either way, the capture and bubbling phases are bound to finish the process. It’s just a matter of which side of the listener is executed.

Capture first and bubble later, this is fixed.

Code sample

target V.S. currentTarget

The difference between:

E. target Elements that the user operates on

E.currenttarget The element that the programmer listens for

This is the e.c. with our fabrication: urrentTarget.

For example:

<div>
    <span>The text</span>

</div>
Copy the code

Let’s say we’re listening for a DIV element, but the user clicks on text, then

E. arget is a span

E.c. with our fabrication: urrentTarget is div

Cancel the bubbling

  • Capture cannot be cancelled, but bubbling can be.

  • E.toppropagation () can interrupt bubble propagation and the browser will no longer go up. Generally used to encapsulate some independent components.

You cannot block the default action

  • The default actions can be cancelled or cannot be cancelled

  • The way to view this information is to search for keyword + event in MDN, such as “Scroll event”.

  • Bubbles means whether the event Bubbles

  • Cancelable means whether the developer can block the default action, regardless of bubbling

How do I prevent page scrolling

The Scroll event cannot block the default action

  • Preventing the default scroll action won’t work because scroll events occur first.

  • To prevent scrolling, block the default actions of wheel and TouchStart

  • Be careful to locate the element in which the scroll bar is located

  • The scrollbar will work, however. You can use CSS to make the scrollbar width: 0 or overflow: Hidden to cancel the scrollbar directly. However, JS can still modify scrollTop.

Prevents mouse wheel events

X.a ddEventListener (" wheel ",(e) = >{

   e.preventDefault()

})
Copy the code

Blocking the mobile phone touch screen scrolling event:

X.a ddEventListener (' touchstart ',(e) = >{

   e.preventDefault()

})
Copy the code

Hide scrollbars with CSS:

:: -webkit-scrollbar {

  width: 0! important }Copy the code

Custom events

  • Browser events: MDN event reference

  • The CustomEvent event is created by the program, and the developer can have any CustomEvent in addition to the CustomEvent.

  • Custom events can use bubbles: true or prevent bubbles cancelable: false

Event delegation

advantages

  • When listening for N events, memory consumption can be saved.

Code Example 100 buttons add click events that only need to listen for the ancestors of 100 buttons

  • Listen for click events for elements that do not currently exist (that is, listen for dynamic elements)

The code example listens for the ancestor, waiting to see if it is the element we want to listen for when clicked.

Encapsulating event delegate

Write a function on(‘click’, ‘#div’, ‘button’, ‘fn’)

The fn function is called when the user clicks on the ‘button’ element in ‘#div’

Code sample

Does JS support events?

Yes and no. JS itself has no events, just calls the addEventListener provided by the DOM. DOM and JS are both browser functions and are in a parallel relationship