Захват событий в JavaScript - PullRequest
Новая
       36

Захват событий в JavaScript

0 голосов
/ 26 января 2012 
<!doctype html>
<html>

<body>
<div id = 'div' style = 'width:100px;height:100px;background:#000000;'></div>
<script type = 'text/javascript'>
document.getElementById('div').addEventListener('click',happen(),true);
function happen()
{
    alert(1)
}
</script>
</body>
</html>

В приведенном выше коде, почему событие вызывается при загрузке страницы, а не при щелчке по элементу div ... Кроме того, правильное имя события click или onclick ....

Ответы [ 6 ]

3 голосов
/ 26 января 2012

Это потому, что вы немедленно вызвали функцию и передали ее нулевой результат addEventListener().

Должно быть: 

document.getElementById('div').addEventListener('click',happen,true);

Если вы хотите передать аргументы happen, вам нужно написать это: 

document.getElementById('div').addEventListener('click', function() {
    happen(args_here, ...); 
}, true);
3 голосов
/ 26 января 2012

Вы вызываете функцию немедленно и передаете ее возвращаемое значение addEventListener, как и любой другой вызов функции.
Достаньте ().

2 голосов
/ 26 января 2012

Проблема с этой строкой: 

document.getElementById('div').addEventListener('click',happen(),true);

Вы должны передавать только имя функции happen, но поскольку вы добавили скобки, вы передаете результат.

Попробуйте вместо этого: 

document.getElementById('div').addEventListener('click',happen,true);
2 голосов
/ 26 января 2012

Это должно работать: 

document.getElementById('div').addEventListener('click',happen,true);
0 голосов
/ 26 января 2012

Обработчику событий не требуется скобка 

 document.getElementById('div1').addEventListener('click',happen,true);
0 голосов
/ 26 января 2012

Как сказали другие ответчики, устранение () решит проблему.

Альтернативой и хорошей практикой для OO Javascript является перенос функции внутри function(){ }, например:

document.getElementById('div').addEventListener('click',function(){happen()},true);

Это сохранит объем, если обратный вызов должен выполняться внутри объекта (в этом случае это не так).

...