javascript addEventListener without selecting children

Question

I need to use javascript only for this project. Sorry, no jQuery (I feel ashamed as well).

I am adding an addEventListener to a div. \"Problem\

Answer 1

You can tell which element the event actually fired on by reading event.target in your callback.

var el = ...
el.addEventListener('click', function(event){
  if (el !== event.target) return;

  // Do your stuff.

}, false);

The other option would be to have handlers bound to the child elements to prevent the event from reaching the parent handler, but that is more work and potentially hides events from things that might actually be listening for them above the parent.

Update

Given your example code, you should be able to do this.

var el = document.getElementById(myObj.id);
el.addEventListener("mousedown", myObjDown, false);

function myObjDown(event) {
  if (el !== event.target) return;

  //do stuff here
}

Also as a general note, keep in mind that none if this will work on IE < 9 because addEventListener is not supported on those.

Answer 2

Here's an alternative, which keeps your myObjDown function in line with a typical event handler. (using e.target as reference to the event invoking element)

var CssSelector = "div.className";
var elms = document.querySelectorAll(CssSelector);

for (i = 0; i < elms.length; i++) {
    elms[i].addEventListener("mousedown", myObjDown.bind(null, {"target":elms[i]}, false);
}

function myObjDown(e) {
  console.log("event: %o - target: %o", e, e.target);

  var elm = e.target;
  //do stuff here
}

---

It was suggested that ..

this method could cause memory leaks with versions of some browsers. If anyone experiences this or has any valuable insights. Please comment.

---

an alternative, in this regard would be

var CssSelector = "div.className";
var elms = document.querySelectorAll(CssSelector);

for (i = 0; i < elms.length; i++) {
    elms[i].addEventListener("mousedown", myObjDown.bind(null, elms[i].id}, false);
}

function myObjDown(id) {
  console.log("element: %o ", document.getElementById(id));

  //do stuff here
}

Answer 3

You can use the currentTarget Event Property

el.addEventListener('click', function(event) {
  if (event.currentTarget !== event.target) {
    return;
  }

  // Do your stuff.
}, false);

More details: https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget