1. The W3C standards

  1. In 2002, THE DOM Level 2 Events Specification was released by W3C.
  2. It states that browsers should support both order of calls.
  3. First of all, in accordance with theGrandpa => dad => sonTo see if a function is listening, and then followSon => dad => grandpaIn order to see if there are any functions listening.
  4. If there is a listening function, call it and provide the event information. If there is no listening function, skip it.
  5. Developers can choose whether to place the listener in the capture or bubble phase

2. Event capture and event bubble

2.1 define

  1. Look for listening functions from the outside in, called event capture
  2. Look for listening functions from the inside out, called event bubbles

2.2 the illustration

3.addEventListener

3.1 Event Binding API

IE5 + series: baba. AttachEvent ('onclick',fn)/ / the bubblingNetscape: baba. AddEventListener ('onclick',fn)/ / capture
W3C: baba.addEventListener('onclick',fn,bool)
Copy the code

3.2W3C API bool values

  1. If bool is true, then let fn be called by the browser during the bubble
  2. If bool is not passed or falsy, then let fn be called by the browser during the capture phase

3.3 the illustration

4. The difference between target and currentTarget

  1. e.targetIs the element that the user operates on
  2. e.currentTargetIs the element that the browser listens to

In short, they may or may not be the same

5. A special case

5.1 background

Only one div is listened on, and fn listens for click events during the capture and bubble phases, respectively

5.2 Solutions

div.addEventListener('click',f1,true)/ / capture
div.addEventListener('click',f2,true)/ / the bubbling
Copy the code
  1. Question: do F1 or F2 come first?
  2. Answer: F1 is executed first
  3. Reason: Whoever listens first executes first

6. Eliminate bubbling

  1. You cannot cancel listening during the capture phase, but you can cancel listening during the bubble phase
  2. e.stopPropagation()Placed in the listener function, it generally interrupts the bubble so that the browser no longer goes up
  3. All bubbles can be removed

7. The default action cannot be blocked

  1. Default actions may or may not be cancelled
  2. To see this information, search in your browserMDN Keyword EventAnd, inMDNIn the English version of
  3. MDNsearchscroll eventSee,BubblesandCancelable.BubblesThe meaning is whether the event bubbles.CancelableWhether support developers can block default actions has nothing to do with bubbling.