Ваш «более полезный код» неверен, потому что он фактически не назначает никаких обработчиков событий;он просто немедленно вызывает код и возвращает undefined.
. Чтобы принять такой подход, эти функции должны возвращать функцию.Вот где вы должны определить параметр события.
function over(i,tri,pop) {
return function(event) {
console.log("over_address=%i", pop[i]); // =0
pop[i].style.display = 'initial';
tri[i].style.animation='anim_dpt_tr 0.4s ease-out forwards';
}
}
function out(i,tri,pop) {
return function(event) {
console.log("out_i=%i", i); // =each index
pop[i].style.display = 'none';
tri[i].style.animation='anim_dpt_tr_back 0.3s ease-in forwards';
}
}
Это старый способ сделать это.Совсем недавно вы использовали переменную i, которая ограничена блоком цикла for, используя let или const вместо var.
Еще одна вещь, которую следует учитывать, этоесли это действительно стоит кэшировать коллекции.Если в макете существует довольно простая взаимосвязь между каждым элементом i в каждой коллекции, тогда предпочтительнее обход DOM внутри обработчика.
Еще одна возможность состоит в создании объекта, реализующего EventListener интерфейс.Затем вы можете просто назначить каждому элементу объект и использовать сам объект вместо функции обработчика событий.
var pop = document.querySelectorAll('#cities > li > a > .popup');
const anc = document.querySelectorAll('#cities > li > a');
var tri = document.getElementsByClassName('triangle-left');
for (var i=0; i < anc.length; i++) {
// Create a new instance of your object, giving it the data needed
// when an event occurs.
var obj = new MyElements(pop[i], anc[i], tri[i], i);
// Use the object itself in lieu of an event handler function
// (see below)
anc[i].addEventListener("mouseover", obj);
anc[i].addEventListener("touchmove", obj);
anc[i].addEventListener("mouseout", obj);
anc[i].addEventListener("touchend", obj);
}
// Holds the relevant info for each index
function MyElements(pop, anc, tri, i) {
this.pop = pop
this.anc = anc
this.tri = tri
this.i = i
}
// Implements the EventListener interface.
// This is what gets invoked when an event occurs.
// It is set up to simply invoke a function on the same object
// that has been given the same name as the event.
MyElements.prototype.handleEvent = function(event) {
this[event.type](event)
}
// These are the functions for each event type. For simplicity, I
// gave each handler the name of the event that fires it so that
// you can use event.type to invoke them.
MyElements.prototype.mouseover =
MyElements.prototype.touchmove = function over(event) {
console.log("over_address=%i", this.i); // =0
this.pop.style.display = 'initial';
this.tri.style.animation='anim_dpt_tr 0.4s ease-out forwards';
}
MyElements.prototype.mouseout =
MyElements.prototype.touchend = function out(event) {
console.log("out_i=%i",this.i); // =each index
pop[i].style.display = 'none';
tri[i].style.animation='anim_dpt_tr_back 0.3s ease-in forwards';
}