1. Click events

1.1 the W3C

  • In 2002, the W3C published a standard document called DOM Level 2 Events Specification Specify that the browser should support both calls in the order of grandparent, father, and son to see if functions are listening and then son => dad => grandparent to see if functions are listening and call if they are listening and provide event information, and skip if they are not

1.2 example

code

1.3 the term

  • Event capture (Netscape) : Look for listener functions from outside in
  • Event bubbling (IE) : Find listener functions from inside out

1.4 the addEventListener

  • Event binding API
IE 5*: baba.attachEvent('onclick', fn) / / the bubblingNetscape: baba. AddEventListener ('click',fn) / / capture
W3C: baba.addEventListener(click, fn, bool)
Copy the code

  • If bool is not passed or falsy

    Fn bubbles, that is, when the browser finds baba in the bubbling phase, fn listener functions are called and event information is provided

  • If bool is true, fn goes capture, that is, when the browser finds baba in capture phase, fn listener will be called and event information will be provided

1.5 W3C event model

Capture (first parent, then child) bubble (first child, then parent) Notice that the e object is passed to all listeners, and the e object does not exist after the event ends

div.addEventListener('click', fn)/ / the bubbling
div.addEventListener('click', fn, true)/ / capture
Copy the code

There are three stages of DOM event propagation: capture phase, target phase, and bubble phase

1.6 Differences between Target and currentTarget

  • E. target Elements that the user operates on
  • E.currenttarget The element that the programmer listens for
<div>
	<span>This is the written word</span>
</div>
Copy the code

The programmer listens for div, and the user actually clicks on text. E.target is span, and E.currenttarget is div

1.7 Cancel bubbling

Capture cannot be cancelled, but bubbles can be cancelled. ** e.topPropagation ()** can interrupt bubbles. The browser does not go up

1.8 Default actions cannot be blocked

Some events cannot prevent default actions. MDN searches for scroll events and sees Bubbles and Cancelable

  • Bubbles means whether the event Bubbles, and all Bubbles can be cancelled
  • Cancelable means whether the developer can cancel the default event. Cancelable has nothing to do with bubbling

Note: The English version of MDN is recommended

1.9 Other Knowledge points

  • How to Stop scrolling
  1. The Scroll event ** can’t block the default action ** Blocking the default scroll action doesn’t work, because scroll happens first. To block scroll, you can block the default action for wheel and TouchStart. Notice that you need to locate the element that the scroll bar is in, for example but the scroll bar still works, Use CSS to make the scrollbar width: 0
  2. CSS can also use Overflow: Hidden to cancel the scrollbar but JS can still modify the scrollTop
// Unscroll the web version
x.addEventListener('wheel'.(e) = >{
	e.preventDefault()
}) 
// Unstyles the scrollbar CSS
::-webkit-scrollbar{
width: 0! important }/ / the mobile version
x.addEventListener('touchstart'.(e) = >{
	e.preventDefault()
})
Copy the code