false in addEventListener?

Question

in this below line: third parameter is kept false. what is this attribute??

var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

Documentations purpose is to answer these questions for you .. if in cases it fails, a question like this wouldn't get the down-votes it's getting. — dbf, Jul 24 '13 at 10:13

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

That's the useCapture parameter. From documentation

useCapture Optional

If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events for a detailed explanation. If not specified, useCapture defaults to false.

Read more about this topic here.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 24 '13 at 10:01

Ionică Bizău

109,027
88
289
474

Why do you recommend using jQuery functions? How does its behaviour compare to setting `useCapture` to `true` or `false`? – Quentin Jul 24 '13 at 10:05
You're wrong. `return false;` in jQuery is more like `stopPropagation` and `preventDefault`. It has nothing to do with `useCapture`. – Quentin Jul 24 '13 at 10:15
No. jQuery `on` doesn't accept a *event, handler, boolean* argument pattern. That just errors now with *Uncaught TypeError: Object # has no method 'apply'* – Quentin Jul 24 '13 at 10:22

Quentin · Answer 2 · 2013-07-24T10:20:12.393

It controls if the event will bubble up or down the DOM tree.

Click on three in the example below (and linked here). Then change false to true and repeat.

If useCapture is set to false, it will bubble up the tree and you will get x3, x2, x1, if it is set to true, it will bubble down and you will get x1, x2, x3.

See:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="x1">One
    <div id="x2">Two
      <div id="x3">Three
      </div>
    </div>
  </div>
  <script>
    function me() { alert(this.id); };
    var divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
      divs[i].addEventListener('click', me, false);
    }
  </script>
</body>
</html>

score 0 · Answer 3 · answered Jul 24 '13 at 10:01

According to this documentation, it's wether or not to use "capture"

If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events for a detailed explanation. If not specified, useCapture defaults to false. Note: useCapture became optional only in more recent versions of the major browsers; for example, it was not optional prior to Firefox 6. You should provide this parameter for broadest compatibility.

false in addEventListener?

3 Answers3

Linked