2014-01-21 6 views
6

Я учусь addEventListener, я испытывал одно из примера, но он не работает .Can кто-нибудь сказать мне, что я делаю неправильноaddEventListener не работает в JavaScript

<html> 
<head> 
<script type="text/javascript"> 
function click_handler1() { alert("click_handler1"); } 
function click_handler2() { alert("click_handler2"); } 

    document.getElementById("id1").addEventListener("click", click_handler1, false); 
    document.getElementById("id2").addEventListener("click", click_handler2, false); 

//window.addEventListener("load", setup, false); 
</script> 
</head> 
<body> 
<a id="id1">some stuff</a> 
<a id="id2">stuff</a> 
</body> 
</html> 

Благодарности

+0

Поместите EventListeners в функцию window.onload –

ответ

7

Ваши элементы не являются потому что вы выполняете javascript перед добавлением элементов. Попробуйте переместить сценарий в нижней части тела:

<html> 
<head> 
</head> 
<body> 
<a id="id1">some stuff</a> 
<a id="id2">stuff</a> 
<script type="text/javascript"> 
function click_handler1() { alert("click_handler1"); } 
function click_handler2() { alert("click_handler2"); } 

    document.getElementById("id1").addEventListener("click", click_handler1, false); 
    document.getElementById("id2").addEventListener("click", click_handler2, false); 

//window.addEventListener("load", setup, false); 
</script> 
</body> 
</html> 
5

Переместить это в конце документа, или обернуть его с функцией OnLoad:

window.addEventListener('load',function(){ 
    document.getElementById("id1").addEventListener("click", click_handler1, false); 
    document.getElementById("id2").addEventListener("click", click_handler2, false); 
}); 

Ваш код не работает, потому что DOM еще не готов, и вы уже пытаетесь получить идентификаторы id1 и id2.

1

Ваш код бросает ниже ошибки в консоли: Uncaught TypeError: Не удается вызвать метод «addEventListener» нулевых , который указывает вам нужно сначала определить свой HTML элемент (якорь в данном случае), а затем вызвать его методы.

Что вы делаете - это метод первого вызова (addEventListener в этом случае) и определение элемента html (якорь в этом случае) позже.

<html> 
    <head></head> 
    <body> 
    <a id="id1">some crap</a><br> 
    <a id="id2">crap</a> 
    <script type="text/javascript"> 
    function click_handler1() { alert("click_handler1"); } 
    function click_handler2() { alert("click_handler2"); } 

    document.getElementById("id1").addEventListener("click", click_handler1); 
    document.getElementById("id2").addEventListener("click", click_handler2); 
    </script> 
    </body> 
    </html> 
Смежные вопросы