Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Шта? Почему JavaScript ведёт себя так странно? (https://javascript.ru/forum/misc/78820-shta-pochemu-javascript-vedjot-sebya-tak-stranno.html)

jaroslav.tavgen 09.11.2019 00:42

Шта? Почему JavaScript ведёт себя так странно?
 
Именно такая реакция возникла у меня, когда увидел следующее:

<button id="button">OK</button>
<script>
function nazhmiNaKnopku(event){
    alert("rezultat");
}
let button = document.getElementById("button");
button.addEventListener("click", nazhmiNaKnopku);
</script>

Если кликнуть на кнопку, то браузер (Google Chrome) выведет "rezultat".

Но вот при таком коде:
<button id="button">OK</button>
<script>
function nazhmiNaKnopku(event){
    alert("rezultat");
}
let button = document.getElementById("button");
button.addEventListener("click", nazhmiNaKnopku);
document.body.innerHTML += "<br>";
</script>

ничего выводиться не будет. Собщений об ошибке тоже нет. Почему браузер так себя ведёт?

рони 09.11.2019 00:45

Цитата:

Сообщение от jaroslav.tavgen
innerHTML +=

парсит/создаёт страницу по новой, без повторной обработки скриптов

рони 09.11.2019 00:48

jaroslav.tavgen,
https://learn.javascript.ru/basic-do...yaet-perezapis

jaroslav.tavgen 09.11.2019 00:52

Цитата:

Сообщение от рони (Сообщение 515191)
парсит/создаёт страницу по новой, без повторной обработки скриптов

Цитата:

Сообщение от рони (Сообщение 515192)

WOW, спасибо большое!

UPDATE: а почему при перезаписи страницы (я так понял, что при innerHTML страница стирается и перезаписывается) не ставятся обработчики событий?

рони 09.11.2019 01:06

Цитата:

Сообщение от jaroslav.tavgen
почему при перезаписи страницы

немного уточню, не страницы, а того блока к которому было применено innerHTML

в данном случае страницы
Цитата:

Сообщение от jaroslav.tavgen
document.body.innerHTML


Malleys 09.11.2019 11:37

Цитата:

Сообщение от jaroslav.tavgen
а почему при перезаписи страницы (я так понял, что при innerHTML страница стирается и перезаписывается) не ставятся обработчики событий?

document.body.innerHTML += "<br>";


это тоже самое, что
document.body.innerHTML = document.body.innerHTML + "<br>";


т. е. если прочитать document.body.innerHTML, то оттуда ничего не известно об обработчиках событии. Если вы хотите менять содержимое <body> через innerHTML, то добавляйте обработчики на document.body. Пример...

<button id="button">OK</button>
<script>
function nazhmiNaKnopku(event){
    if(event.target.closest("button"))
        alert("rezultat");
}
document.body.addEventListener("click", nazhmiNaKnopku);
document.body.innerHTML += "<br>";
</script>


Часовой пояс GMT +3, время: 10:52.