Как передать идентификатор в функцию после щелчка по слушателю

Question

Я довольно новичок в HTML5 / Javascript / CSS3 и не совсем понимаю, как передать идентификатор моего прослушивателя событий в новую функцию.Я создаю видеоплеер, и это часть увеличения и уменьшения громкости, и я предпочел бы использовать одну функцию для увеличения и уменьшения громкости, используя операторы if, которые будут проверять идентификатор.

Вот то, с чем я работаю:

 volume_up = document.getElementById('volume_up'); //get the volume_up button
 volume_up.addEventListener('click', volumeUp, false); //call function "volumeUp" on click

Вот функция «volumeUp»:

function volumeUp(click_button){
alert(click_button.id); // i want to be able to get the id here
myMovie.volume = myMovie.volume - 0.1;
}

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

Я пытался сделать это:

   volume_up.addEventListener('click', volumeUp(volume_up), false);

и

    volume_up.addEventListener('click', volumeUp(volume_up.id), false);

без удачи.У меня есть кнопка увеличения громкости, и всякий раз, когда я нажимаю ее, громкость меняется, и появляется всплывающее окно с предупреждением, но оно не определено.

Любая помощь будет принята с благодарностью.Спасибо :)

Answer 1

document.getElementById('volume_up').addEventListener('click', _volume, false);
document.getElementById('volume_down').addEventListener('click', _volume, false);

function _volume(event){
    if(this.id == 'volume_up') {
        myMovie.volume += 0.1;
    } else {
        myMovie.volume -= 0.1;
    }
}

Это всего лишь пример.Вы можете использовать некоторую защитную логику для проверки IE и использовать attachEvent вместо этого, когда это применимо.

Причина, по которой они не работают ...

volume_up.addEventListener('click', volumeUp(volume_up), false);
volume_up.addEventListener('click', volumeUp(volume_up.id), false);

...потому что вы вызываете функцию и передаете результат из volumeUp в качестве обратного вызова, который не будет typeof == 'function'

Answer 2

В обработчике события «this» привязано к элементу, вызвавшему событие, поэтому вы можете просто использовать «this.id».

Проверьте этот пример: http://jsfiddle.net/vyGdJ/