Basic event model

In a We B application or Web site, responses can be achieved through user actions or system events. In JavaScript, before events are standardized, browsers have an Event Model — the Basic Event Model.

An event is an action performed by the user or the browser itself. It is an interaction between a document or the browser, such as a click button. Click is the name of the event. The interaction between JS and HTML is achieved through events, and DOM supports a large number of events.

Event capture

Event capture was developed by the Netscape browser development team, who argued that events typically start at the window and propagate inward at each level of node until they reach the most specific node (think of it as catching criminals from the outermost layer and work their way inward).

  • Looking for listeners from the outside in is called event capture.

The event bubbling

Event bubbling is a stream of events in IE, events are received by the most specific element and then propagated up the hierarchy, happening at each node until they propagate to the Document object, and browsers like Chrome bubble to the Window object, and that’s how interesting bubbling is, as opposed to capture. (Understandably, when an apprehended prisoner wants to escape, he has to break through the innermost layer, which is bubbly.)

  • Look for the listener function from the inside out, called event bubble

The DOM event flow

The event flow defined here has three phases: the event capture phase, the target phase, and the event bubbling phase.

Execution time

Browsers always call event capture first and then event bubbling when invoking both event sequences,

In common terms, when an event is triggered, the browser will automatically check whether there is the same event from the top TAB outside the user’s operation label. If there is, the event will be triggered. If there is no, the browser will continue to check the label that knows the user’s operation

In this case, the browser will continue to check the upper level of the label by the user. If the same event is triggered, if not, the browser will continue to check up to the highest level of the element. This process is called bubbling. (Execute if there are listener functions and provide event information, skip if there are no listener functions)

A simple set of code implements capture and bubbling

Three instance methods

  • AddEventListener: A listener function for binding events

  • RemoveEventListener: Removes an event listener

  • DispatchEvent: events are triggered

    const level1 = document.querySelector('.level1') const level2 = document.querySelector('.level2') const level3 = document.querySelector('.level3') const level4 = document.querySelector('.level4') const level5 = document.querySelector('.level5') const level6 = document.querySelector('.level6') const level7 = document.querySelector('.level7') let n = 1 const remove = (x)=>{ const t = x.currentTarget setTimeout(()=>{ Const add = (x)=>{const t = x.currenttarget setTimeout(()=>{const t = x.currenttarget setTimeout(()=>{ T.classlist.add ('x')},n*1000) n+=1} // Bubble Level1.adDeventListener ('click', remove,true) level1.addEventListener('click',add) level2.addEventListener('click', remove ,true) level2.addEventListener('click',add) level3.addEventListener('click', remove,true) level3.addEventListener('click',add) level4.addEventListener('click', remove,true) level4.addEventListener('click',add) level5.addEventListener('click', remove,true) level5.addEventListener('click',add) level6.addEventListener('click', remove,true) level6.addEventListener('click',add) level7.addEventListener('click', remove,true) level7.addEventListener('click',add)Copy the code

Cancel the bubbling

Bubbling can be cancelled, but capture cannot

E.toppropagation () can interrupt bubble propagation, the browser will not go any further.

A small summary
  • target 和 currentTaget: One is clicked by the user, and one is listened to by the developer.
  • Cancel bubbling:e.stopPropagation()
  • Event features:BubblesIndicates whether bubbles.cancelable: whether to support developers to cancel bubble. For example, Scroll does not support to cancel bubble
  • How to disable scrolling: Cancel specific elementswheel 和 touchstartDefault action for
Learning records, there are errors please correct a few small code and MDN event referenceMDN event reference-JS Bin Disables scrolling-Custom events