Javascript: код вызывается при загрузке, но должен запускаться при возникновении события щелчка - PullRequest
Новая
       0

Javascript: код вызывается при загрузке, но должен запускаться при возникновении события щелчка

1 голос
/ 01 апреля 2012

Я пытаюсь понять обработку событий Javascript. Мне нравится, когда какой-то код вызывается, когда я нажимаю кнопку и добавляю обработчик событий - мой код: 

<html>
 <head>
    <title>
        PDSA #4.4: Event Registering
    </title>
    <script>
        function changeTheButton(btn){
            btn.innerHTML = "Please, don't press again!";
            alert("Changed the button");
        }

        function init(){
            btn = document.getElementById("button1");
            btn.addEventListener("click", changeTheButton(btn), false);
        }
    </script>
 </head>
 <body onload="init()">
    <form>
        <button id="button1">Don't press this button</button>
    </form>
 </body>
</html>

Когда я открываю этот сайт в Chrome или Firefox, текст на кнопке уже звучит так: «Пожалуйста, не нажимайте снова!» и предупреждение открывается, прежде чем я что-то делаю.

Почему это происходит? Я ожидал, что это произойдет, когда я нажму кнопку, а не при загрузке.

Заранее спасибо за любую помощь Андре

1 Ответ

2 голосов
/ 01 апреля 2012

Смотреть эту строку: 

btn.addEventListener("click", changeTheButton(btn), false);

Вы на самом деле звоните changeTheButton прямо здесь, в результате alert. Вы, вероятно, хотите зарегистрировать его как обработчик событий, таким образом, откладывая предупреждение до нажатия кнопки: 

btn.addEventListener("click", function() { changeTheButton(btn) }, false);

Вы можете посмотреть результат на jsFiddle .

Еще одна проблема, с которой вы можете столкнуться, заключается в том, что нажатие кнопки вызывает перезагрузку страницы, поскольку по-прежнему вызывается обработчик событий по умолчанию. Вы можете предотвратить это, вызвав .preventDefault() в экземпляре события: 

function changeTheButton(ev, btn) {
    alert("Changed the button");
    btn.innerHTML = "Please, don't press again!";
    ev.preventDefault();
}

function init(){
    btn = document.getElementById("button1");
    btn.addEventListener("click", function(ev) { 
        changeTheButton(ev, btn) 
    }, false);
}

Демо .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...