How to have a click event listener be less specific?

Question

I have a few nested divs, like so:

<div class="person" onClick="revealBio()">
    <div class="name">...some name</div>
    <div class="role">...some role</div>
    <div class="bio">...some bio</div>     
</div>

In my CSS, I have the bio hidden (just like an accordion). When that person clicks onto any member's info, I want to expand to show the bio (through a change in css). However, the target on my click is too specific. I want it to return to me the person card ("person" div) that was clicked, but it also just returns to me the name and role if those are specifically clicked.

Here is the vanilla javascript that I'm using:

function revealBio(){
  document.addEventListener('click', function(e) {
    var revealThisBio = e.target;
    revealThisBio.classList.toggle('reveal-bio')
  })
}

I would like for it to return to me:

<div class="person" onClick="revealBio()">
  <div class="name">...some name</div>
  <div class="role">...some role</div>
  <div class="bio">...some bio</div>     
</div>

so that I can toggle a class onto the person class that reveals the bio info. Is there a way to have my target be less specific?

Thanks!

It looks like every time you click on the `.person` you'll bind another click listener. — zzzzBov, Dec 04 '15 at 23:03

zzzzBov · Accepted Answer · 2015-12-04T23:31:24.063

To address your question of how to select the .person that you clicked on, don't use e.target, instead use e.currentTarget, or this.

More importantly, don't bind additional click handlers every time you click on the .person. revealBio is already an event handler, so just make the necessary changes there:

function revealBio() {
  this.classList.toggle('reveal-bio');
}

You're at least attempting to use addEventListener, which you should, so instead of adding onclick="...garbage...", bind your click handler from JS:

var people,
    person,
    i;

function revealBio() {
  this.classList.toggle('reveal-bio');
}

people = document.querySelectorAll('.person');
for (i = 0; i < people.length; i++) {
  person = people[i];
  person.addEventListener('click', revealBio);
}

There's quite a lot wrong with the code. The `e.currentTarget` and `this` within the `.addEventListener()` handler will point to `document`, so this won't do what the OP wants. And then of course the handler is re-bound on every click. — , Dec 04 '15 at 23:12

How to have a click event listener be less specific?

1 Answers1