“This is the 22nd day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

In our daily front-end interviews we are often asked what event bubbling and event capturing are, when they are triggered, and what is the correlation. So what exactly is event bubbling and event capture, and what is the difference? Let’s take a look!

The event bubbling

Simply put, event bubbling is the binding of an event to an object, and if a handler for the event is defined, the handler is called. Otherwise, the event propagates to the parent of the object until the event is executed and finally reaches the outermost, the Document object.

1. Why do events bubble up?

  • Event bubbling allows multiple operations to be processed centrally (putting the event handler in the parent element), making it easy and efficient to process all together

Here’s an example:

<div onclick="eventHandle(event)" id="outSide">
    <div id="inSide"></div>
</div>
Copy the code
  • Different objects capture the same event simultaneously

Here’s an example:

<div onclick="outSideWork()" id="outSide">
  <div onclick="inSideWork()" id="inSide"></div>
</div>
Copy the code

2. Prevent events from bubbling up

Here’s an example:

// Prevent event bubbling functions
function stopBubble(e){
   if (e && e.stopPropagation)
      e.stopPropagation()
   else
      window.event.cancelBubble=true
}
Copy the code

Event capture

Event capture and event bubbling are a completely opposite process, that is, events are passed from the outside to the inside.

  • The browser first checks the outer ancestorhtmlIf one is registered during the capture phaseonclickEvent to run.
  • Passes to the inner element, performing the same operation until the element is actually clicked.

By default in modern browsers, all event handlers are registered in the bubble phase, so clicking on a child element executes an event on the child element, bubbles up, and fires an event on the parent element.

The third argument to the addEventListener function is a Boolean value.

  • When the Boolean is zerofalseIs (the default value), indicating an upward bubbling event.
  • When the Boolean is zerotrue“, the trigger event is captured down.

An event that cannot bubble

  • blurTriggered when an element loses focus,focusoutEvents are also triggered when out of focus, but can bubble;
  • focusTriggered when the element gets focus.
  • mouseenterThis event is triggered when the mouse moves over the element and corresponds tomouseoverEvents (can bubble);
  • mouseleaveTriggered when the mouse moves away from the element, corresponding to a mouseout (bubbles);

Methods in the event object

  • stopPropagation() Prevents events from bubbling, so that when the element is clicked, the events bound to the parent element are no longer triggered.
  • preventDefault()Prevent default events from occurring;
  • stopImmediatePropagation()Used to prevent other event listeners listening to the same event from being called and to prevent event bubbling

Target vs. currentTarget

The target attribute points to the event target, while the currentTarget attribute points to the object handling the current event, which always points to the element bound to the event. Target may not point to the event target at which it was defined. Here’s an example:

div.addEventListener('click'.(e) = > {
    console.log(e.target, e.currentTarget);
},false);
Copy the code

E.target may point to a div element or to its children. E.currenttarget always points to the div element.

Here’s an example:

const ipt = document.querySelector('input');
ipt.addEventListener('click'.() = > {
  console.log('click');
},false);

ipt.addEventListener('focus'.() = > {
  console.log('focus');
}, false);

ipt.addEventListener('mousedown'.() = > {
  console.log('mousedown');
}, false);

ipt.addEventListener('mouseenter'.() = > {
  console.log('mouseenter');
}, false);

Copy the code

Print result:

mouseenter  // Triggered when the mouse moves over the element
mousedown   // Triggered when the mouse is pressed
focus       // Trigger when input box has focus
click       // The click event is triggered last
Copy the code

These are some concepts about event bubbling and event capturing.