Javascript Events addEventListener Last Parameter

Question

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>

What *specifically* are you seeing in the `console.log` output that confuses you? — T.J. Crowder, Jan 24 '17 at 10:18
There is no `bubble = true` in the output. There's `"bubbles": true`, which I've addressed in my answer below. — T.J. Crowder, Jan 24 '17 at 11:37
yes bubbles = true so that is my point that when i put true in last parameter of addEventListener so it bubbles should be false, because true means capture or false means bubbles — Haseeb Jumani, Jan 24 '17 at 11:47
Read [my answer](http://stackoverflow.com/a/41825664/157247). I explain that. — T.J. Crowder, Jan 24 '17 at 11:48

T.J. Crowder · Answer 1 · 2017-01-24T11:56:03.600

, 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

1 Answers1