Каким свойством события можно узнать позицию элемента в массиве?

Question

[Ingernirated]

Есть 3 элемента, как можно узнать, какой он из них?
Перечитал все свойства события, но так и не нашел способа
https://jsfiddle.net/f4ocguv4/29/

Comments

[Сергей delphinpro]

нет такого свойства.
Есть event.target - элемент на котором произошло событие.

Answer 1

[VoidVolker]

Вот так: https://jsfiddle.net/edfgg6jw/1/

<div>
    <div class="div2"></div>
    <div class="div2"></div>
    <div class="div2"></div>
</div>

function el(e) {
    var target = e.target
        , arr = target.parentNode.children
        , len = arr.length
        , i = 0
        , elementIndex = null
    ;
    for(; i<len; i++){
        if(arr[i] === target){
            elementIndex = i;
            break;
        }
    }
    console.log('elementIndex: ', elementIndex);
}
window.addEventListener("click", el);

Comments

[Ingernirated]

if(arr[i] === target
а как он узнает, что arr[i] и есть e.target?
ведь у e.target нет информации о его месте в массиве

[VoidVolker]

Кто именно узнает? Оператор строгого сравнения?

[myaca]

VoidVolker: извините, можете рассказать откуда берется аргумент у функции el? т.е. "e" в скобочках, от которого потом берется все остальное... Ведь вызова функции нету никаккого, откуда функция знает, что это нужное событие?

[VoidVolker]

e - это экземпляр объекта типа MouseEvent. Когда пользователь кликает по элементу, то браузер создает новое событие типа MouseEvent и устанавливает ему все нужные свойства о данном событии - элемент на котором пользователь кликнул, положение курсора и прочее. Затем браузер смотрит список коллбэков (т.е. функций), которые надо вызвать при данном событии, среди них вызывает функцию el и передает ей в качестве аргумента объект. Т.е. примерно так:

var evt = new MouseEvent("click"); 
el.call(evt);

[myaca]

VoidVolker: спасибо большое за такое объяснение

Answer 2

[Сергей Собко]

Можно вот так

function el(e) {
    var parent = e.target.parentNode; //Узнаем родителя текущего элемента
    var children = parent.childNodes; //Получаем ВСЕХ детей родителя
    var count = 0; //Счётчик
    //Пробегаем по детям
    for (i=0; i < children.length ; i++) {
        //Если текущий ребёнок является узлом элемента
        if (children[i].nodeType === document.ELEMENT_NODE ) {
            //Увеличиваем счётчик
            count++;
            //Выводим текущую позицию элемента, если на нём сработало событие
            if(children[i] === e.target) {
                console.log(count);
            }
        }
    }
}
window.addEventListener("click", el);

Comments

[Ingernirated]

if (children[i].nodeType === document.ELEMENT_NODE )

как тут происходит сравнение?
if(children[i] === e.target)
и где он в e.target найдет его место в массиве, если там нет этой информации?

[Сергей Собко]

Ingernirated:
В первом if вы пытаетесь сопоставить типы элементов, что бы счётчик не увиличился, если вы напоролись на TEXT_ELEMENT. .nodeType возвращает беззнаковое короткое целочисл.... document.ELEMENT_NODE - константное значение, равное 1.
Во втором:
Опять таки, вы сравниваете два элемента между собой, а не их положение в "массиве". e.target возвращает ссылку на объект, на котором сработало событие.