Javascript Events addEventListener Last Parameter

Question

Javascript Events addEventListener Last Parameter

797 Views Asked by Haseeb Jumani At 20 October 2024 at 08:02

Q) My point is that whenever i put the last parameter of addEventListener either true or false in both situation the target of event (e.target) remain same i.e img , in the code below you can see i put the last parameter true which means capturing but still in the console.log bubble is true, thats confusing me

document.querySelector('.grid').addEventListener('click', function (e) {
    console.log(e);
    console.log(e.target + " " + this.className);
},true)

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Events</title>
  <link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="art">
  <h2>Art Eliminator</h2>
  <p>Pick your favorite piece of art through the process of elimination. Click on the pieces you like the least until you are left with a single one. Click on the last image to get some info</p>
    <ul class="grid">
      <li><img src="images/Hassum_Harrod_03_tn.jpg" alt="Hassum Harod's Summer Trees"></li>
      <li><img src="images/LaVonne_LaRue_02_tn.jpg" alt="LaVonne LaRue's Mighty Duck"></li>
      <li><img src="images/Lorenzo_Garcia_01_tn.jpg" alt="Lorenzo Garcia's The Dancer"></li>
      <li><img src="images/Jennifer_Jerome_01_tn.jpg" alt="Jennifer Jerome's A day of Rest'"></li>
      <li><img src="images/Constance_Smith_03_tn.jpg" alt="Constance Smith's Letterforms"></li>
      <li><img src="images/LaVonne_LaRue_04_tn.jpg" alt="LaVonne LaRue's Flow"></li>
      <li><img src="images/Lorenzo_Garcia_03_tn.jpg" alt="Lorenzo Garcia's Mother"></li>
      <li><img src="images/Jennifer_Jerome_02_tn.jpg" alt="Jennifer Jerome's Farm Life"></li>
      <li><img src="images/Hillary_Goldwynn_03_tn.jpg" alt="Hillary Goldwynn's Blue Sky"></li>
    </ul>
    </div>
  <script src="script.js"></script>
</body>
</html>

Original Q&A

There are 1 best solutions below

**T.J. Crowder** · Answer 1

, in the code below you can see i put the last parameter true which means capturing but still in the console.log bubble is true, thats confusing me

If it's the "bubbles": true, part that's confusing you, all that's saying is that this event (click) is an event that bubbles; it's not saying it's currently bubbling. bubbles will always be true for click. The part that says what event phase you're seeing is in eventPhase; see the Event interface.

const unsigned short NONE = 0;
const unsigned short CAPTURING_PHASE = 1;
const unsigned short AT_TARGET = 2;
const unsigned short BUBBLING_PHASE = 3;
readonly attribute unsigned short eventPhase

So eventPhase is 1 for capturing, 2 when the event is at the target, and 3 when bubbling.

whenever i put the last parameter of addEventListener either true or false in both situation the target of event (e.target) remain same i.e img

The phase you hook has no effect on the element on which you've hooked the event. All that changes is when you get the event. This diagram from the slightly-outdated DOM3 Events spec helps picture capturing vs. bubbling:

As you can see, when an event is triggered, first the event is captured and that flows from the root (window) through the document and all ancestors to the target element (the .grid ul in your case); then it bubbles back up through the ancestors and document back to window.

Here's a simpler snippet demonstrating this:

// Hook both capture and bubble on the inner and outer elements:
var target = document.getElementById("target");
var inner = document.getElementById("inner");
var outer = document.getElementById("outer");

target.addEventListener("click", function(e) {
  showEvent("target capture", e);
}, true);
target.addEventListener("click", function(e) {
  showEvent("target bubble", e);
}, false);

inner.addEventListener("click", function(e) {
  showEvent("inner capture", e);
}, true);
inner.addEventListener("click", function(e) {
  showEvent("inner bubble", e);
}, false);

outer.addEventListener("click", function(e) {
  showEvent("outer capture", e);
}, true);
outer.addEventListener("click", function(e) {
  showEvent("outer bubble", e);
}, false);

function showEvent(label, e) {
  // e.eventPhase will be:
  //   * 1 when capturing
  //   * 2 at the target element
  //   * 3 when bubbling
  console.log(label + ": eventPhase = " + e.eventPhase);
  // Now showing e.bubbles because it's always
  // true for clicks
}

.as-console-wrapper {
  max-height: 80% !important;
}

<div id="outer">
  <div id="inner">
    <div id="target">
      Click this div
    </div>
  </div>
</div>

99.99% of the time, we hook the bubbling phase. It tends to be the more useful of the two, and we got used to it as IE prior to IE9 didn't support the capture phase (and IE9-IE11 still don't when they're in "compatibility" mode).

Javascript Events addEventListener Last Parameter

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in EVENTS

Related Questions in EVENT-HANDLING

Related Questions in EVENT-BUBBLING

Related Questions in EVENT-CAPTURING

Trending Questions

Popular # Hahtags

Popular Questions