Ahoj!
Tento příspěvek je vlastně jen moje zvědavost. Nedávno jsem narazil na problém s titulkem. Může to být opotřebované, ale vaše pomoc, váš komentář, cokoliv je velmi vítáno!
Začněme odpovědí, v čem se onclick liší od addEventListener, je stejný základ, jinými slovy jazyky samotné.
Jde o to, že onclick je HTML pro addEventListener, zatímco addEventListener je JavaScript pro onclick.
Níže uvedené příklady vám pomohou pochopit.
Pokud vytvoříte soubor HTML a zapíšete JavaScript přímo do souboru nebo načtete soubor JavaScript v souboru HTML, budou HTML a JavaScript na stejné úrovni. V tomto případě se onclick neliší od addEventListener.
Ajax však mění příběh. Zamysleme se nad příkladem níže.
<hello.html>
<div id="hello" onclick="ajax()" style="cursor: pointer;">Hello!</div>
<script>
function ajax(){
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
document.body.innerHTML = this.responseText;
}
};
ajax.open("GET", "hello2.html", true);
ajax.send();
}
</script>
Pokud kliknete na text Hello!, zobrazený obsah se změní na obsah v hello2.html. hello2.html je následující.
<hello2.html>
<div id="hello2" onclick="next()">How are you?</div>
Problém je v dalším kroku. Kde by měl být zapsán obsah další funkce?
Pokud kliknete na Ahoj!, Jak se máš? se zobrazí, protože obsah celého těla byl změněn ajaxem. Nyní tedy vidíme hello2.html, takže další funkce by měla být zapsána v hello2.html nebo by měla být načtena jako odpovídající soubor JavaScriptu v hello2.html. Jmenovitě,
<hello2.html>
<div id="hello2" onclick="next()">How are you?</div>
<script>
function next(){
document.getElementById("hello2").style.color = "red";
}
</script>
Pokud to však uděláte, vrátí se „další není funkce“.
Co takhle použít addEventListener místo onclick? Konkrétně používáme
<hello2.html>
<div id="hello2">How are you?</div>
<script>
document.getElementById("hello2").addEventListener("click", function(){
document.getElementById("hello2").style.color = "red";
});
</script>
Pokud to uděláte, odpověď je, že se vlastně nic neděje.
Jde o to, že jsme si všimli, že adresa URL se nezmění. Pokud to uděláte v hello.html, co se stane? Jaké změny?
Ve skutečnosti se stane něco fantastického. Pokud provedete druhé v hello.html, odpověď zní:"Nelze přečíst vlastnost 'addEventListener' of null", zatímco pokud provedete první v hello.html, barva textu "Jak se máš?" se změní na červenou.
To se děje zejména proto, že (obsah )hello2.html je zobrazen iaxem, ale URL se nezmění, jinými slovy hello.html je stále otevřen.
Vraťme se na začátek příběhu. onclick je HTML, takže by měl být zapsán přímo v souboru HTML nebo uvnitř prvku HTML. Na jedné straně je addEventListener JavaScript, takže by měl být zapsán v souboru HTML, který se otevře, konkrétně URL.
V příkladu byl hello2.html zobrazen ajaxem, ale nebyl otevřen. To je důvod, proč addEventListener napsaný v hello2.html nebyl přečten a ten zapsaný v hello.html byl null, protože hello2.html nebyl otevřen.
Na závěr musím říci ještě jednu věc. Nejlepší způsob, jak se takové věci vyhnout, je najít sofistikovanější realizaci příkladu.
Děkuji za přečtení!