Get index of e.target child inside eventlistener

Question

How exactly do I get the index of e.target? IndexOf wont work and I dont want to use the Array.prototype property. So what is the best way to get the index of the target element?

Basically element is a container with a bunch of divs. If I hover over a div I want to get its index.

element.addEventListener("mouseover", someEvent, false);


function someEvent(e) {
    if (e.target !== e.currentTarget) {
        // get the index of the hovered element here
    }
    e.stopPropagation();
}

I explicitely stated that I dont want to use Array.prototype so the link is not a duplicate.

By the way, here a jsfiddle https://jsfiddle.net/nbjve593/

@adeneo I thought the code makes it clear. Basically element is a container with a bunch of divs. If I hover over a div I want to get its index. — Asperger, Feb 13 '16 at 19:53
No, that's not clear, `addEventListener` only works on one single element — adeneo, Feb 13 '16 at 19:53
I have no idea what you're doing, you claim to be using `addEventListener` on a container full of DIV's, but that's not possible — adeneo, Feb 13 '16 at 19:54
@adeneo I never said I was. Im making use of the bubbling effect. — Asperger, Feb 13 '16 at 19:56
...of the what now? So the index in relation to what then, when using the "bubbling effect" ? — adeneo, Feb 13 '16 at 19:56
Possible duplicate of [JavaScript DOM: Find Element Index In Container](http://stackoverflow.com/questions/11761881/javascript-dom-find-element-index-in-container) — Asons, Feb 13 '16 at 19:57
This should help: http://stackoverflow.com/questions/14787248/javascript-set-onmouseover-for-multiple-elements-without-using-hover — Err, Feb 13 '16 at 19:57
@adeneo, if I understood correctly: you are trying to get position of child element within parent node — RomanPerekhrest, Feb 13 '16 at 19:57
@adeneo I do it just like that if I have multiple event listeners. I add the event listener to the parent then during the event chain you'll get the correct e.target — zer00ne, Feb 13 '16 at 19:57
@LGSon not a duplicate. I made it clear that I dont want to use the Array.prototype property. I know how to solve it using Array.prototype.slice.call but Im not interested in doing so for this particular problem — Asperger, Feb 13 '16 at 19:59
Can you please show your HTML? That way we can see what you're trying mouse-over, and the element(s) of which you're trying to find the index. As it is you're trying to explain code to us, as well as explaining your intent//requirement. Reduce your work: *show* us your [MCVE] code. Also, *why* don't you want to use `Array.prototype.slice.call()`? If you can explain the requirements that might help us to provide better answers (although, admittedly, sometimes using an approach you don't want to use remains the best way, but not always). — David Thomas, Feb 13 '16 at 19:59
@Asperger, not Array.prototype.slice.call, this: Array.prototype.indexOf — RomanPerekhrest, Feb 13 '16 at 20:00
Okay, if you know how to do it with `[].slice.call` show us that code, what would you convert to an array to use `indexOf` on, in the code above? — adeneo, Feb 13 '16 at 20:01
Another possible duplicate:http://stackoverflow.com/questions/378365/finding-dom-node-index — Asons, Feb 13 '16 at 20:03

Asons · Accepted Answer · 2018-08-29T21:15:12.073

1

As the mouseover event doesn't have an index property and you don't want to use Array.prototype methods, here is an alternative

var els = document.querySelectorAll('#container-id div');

for(i=0; i < els.length; i++) {

  els[i].index = i;

  els[i].addEventListener('mouseover', function(e) {
    
    e.target.innerHTML = e.target.index;

  }, false);
}

#container-id div {
  background: yellow;
  margin: 10px;
  height: 20px;
}

<div id="container-id">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Update

If you have thousands of child elements you might want Array.prototype.indexOf anyway.

This version use children instead of childNodes, to avoid getting all the text nodes.

var el = document.getElementById('container-id');

  el.addEventListener('mouseover', function(e) {
    
    var p = e.target.parentElement;
    var index = Array.prototype.indexOf.call(p.children, e.target);
    
    if (e.target !== el) {
      e.target.innerHTML = index;
    }

  }, false);

#container-id div {
  background: yellow;
  margin: 10px;
  height: 20px;
}

<div id="container-id">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Initial source: Finding DOM node index

edited Aug 29 '18 at 21:15

answered Feb 13 '16 at 20:26

Asons

84,923
12
110
165

As an answer to your comment: I dont need the index for any particular reason. Im just trying to learn new techniques. – Asperger Feb 13 '16 at 20:32
What you are doing is not a good idea. You are applying an eventlistener to all of those children. Also I would cache the length in the for loop but that wouldnt make the performance any better. Imagine you would have 1000 divs and you have to apply an eventlistener to each of them. – Asperger Feb 13 '16 at 20:33
2

@Asperger: *please*, if you're still actively interested in doing this, show the code you're working with. Without your HTML and JavaScript (and the requirements you need the answers to meet) it's very hard to provide anything other than best-guesses. **Please** help us to help you. – David Thomas Feb 13 '16 at 20:35
@DavidThomas ok hang on. I will do this, sorry for not having posted enough infos. – Asperger Feb 13 '16 at 20:35
@Asperger That is a pretty normal, and recommended, way to do it, unless, as you commented, you have thousands of elements, ... then you have to consider alternatives to get the index, and the Array.protoype methods suddenly becomes your friend again. – Asons Feb 13 '16 at 20:39
@Asperger Updated answer with a 2:nd approach, which is already suggested amongst the comments and my 2:nd possible dupe link, though I used `children` instead of `childNodes` to avoid text nodes – Asons Feb 13 '16 at 20:56
Oh well. I thought there were other ways as well. Accepted since you were the only nice guy here. – Asperger Feb 13 '16 at 21:02

Get index of e.target child inside eventlistener

1 Answers1