параметров в обработчиках событий - Javascript

Question

У меня есть прослушиватель событий, который включает в себя обработчик событий с параметрами ... и он работает ... и, из того, что я прочитал, это не предполагается. Когда я включаю обработчик событий в анонимную функцию, например (я думаю, что), я должен, он перестает работать.

Я искал этот форум для подобных вопросов, и все вопросы отвечают одинаково (перефразируя): «Если вам нужны параметры в обработчике событий, вы должны поместить его в анонимную функцию».

Извините, если это вопрос, относящийся к мирской жизни, я новичок в этом (и я искал повторяющиеся вопросы): Но почему это работает и, что более важно, есть лучший способ сделать это?

---

---

[Разъяснение информации: У меня есть 5 кнопок на странице, поэтому петлю. Каждая кнопка управляет другой областью веб-страницы (но с тем же действием, измените стиль css с «display: none» на «display: block») - вот почему мне нужно индивидуальное соответствие между отдельной кнопкой и отдельный тег «details», следовательно, необходимость в параметрах в обработчике событий. Наконец, кнопки переключения, следовательно, «если ... то еще».]

---

п.с. У меня есть положить страницу в Интернете, временно, так что вы можете увидеть, как это работает (это просто «примечания к я»страница и неполно): http://www.mylescallan.com/gameDesign/gameDesignIntroduction.html

---

var buttons = document.getElementsByClassName("expand"), 
    details = document.getElementsByClassName("reveal"), 
    i; 

function makeClickHandler(details, i) { 
    "use strict"; 
    function myHandler() { 
    if (details[i].style.display === 'block') { 
     details[i].style.display = 'none'; 
     buttons[i].innerHTML = "<em>Click Here:</em> To Expand The Source Code For This Section"; 
     buttons[i].style.opacity = "1"; 
    } else { 
     details[i].style.display = 'block'; 
     buttons[i].innerHTML = "<em>Click Here<em>: Don't Forget To Hide This Section, You've Read It"; 
     buttons[i].style.opacity = "0.5"; 
    } 
}; 
    return myHandler; 
} 

for (i = 0; i < buttons.length; i++) { 
buttons[i].addEventListener("click", makeClickHandler(details, i), false); 
} 

Answer 1

если вы хотите параметров в обработчике события, вы должны поместить его в анонимной функции.

Не совсем. Если вы хотите параметры, зависящие от итерации, в обработчике событий, вам придется поместить обработчик в свою собственную область , где эти параметры сохранены.

Теперь этот объем часто достигается с помощью IEFE (см. Примеры here), который обычно является анонимным. Однако вы также можете назвать их, не влияя на поведение обработчика.

В вашем фрагменте примера ни одна из функций не анонимна, они явно указаны. makeClickHandler() действительно предоставляет область с переменной i, в которой живет замыкание myHandler. Он работает, как и ожидалось.

Может быть, это помогает ваше понимание, когда вы заметите, что

function makeClickHandler(details, i) { 
    return function myHandler(event) { 
     … // use details, i, event 
    }; 
} 
for (var i = 0; i < buttons.length; i++) 
    buttons[i].addEventListener("click", makeClickHandler(details, i) , false); 
//              no call here^

эквивалентно

function addClickHandler(button, details, i) { 
    function myHandler(event) { 
     … // use details, i, event 
    } 
    button.addEventListener("click", myHandler , false); 
//        no call here^(that's what is said everywhere) 
} 
for (var i = 0; i < buttons.length; i++) 
    addClickHandler(buttons[i], details, i);