addEventListener vs. Onclick in JavaScript
Dieser Artikel erklärt die Unterschiede zwischen JavaScript addEventListener und onclick.
addEventListener vs. onclick in JavaScript
Obwohl sowohl addEventListener als auch onclick denselben Zweck erfüllen können, gibt es einige Nuancen, die Sie kennen sollten.
Darum geht es in diesem Artikel. Darüber hinaus begleiten wir unsere Erläuterungen mit Codebeispielen.
onclick ist ein HTML-Attribut; addEventListener funktioniert nur im <Script>-Element
onclick ist ein HTML-Attribut, sodass Sie es direkt zu einem HTML-Element oder innerhalb des <script>-Elements hinzufügen können. In der Zwischenzeit können Sie addEventListener nur innerhalb des <script>-Elements verwenden.
Zum Beispiel haben wir im folgenden Code onclick als Attribut des button-Elements hinzugefügt. Darüber hinaus ist der Wert von onclick eine JavaScript-Warnmeldung.
Wenn Sie auf die Schaltfläche klicken, sehen Sie daher eine JavaScript-Warnung in Ihrem Webbrowser. Allerdings können Sie addEventListener nicht als HTML-Attribut hinzufügen.
Beispielcode:
<head>
<meta charset="utf-8">
<title>1-onlick-HTML-attribute-addEventlistener-Via-Script-Element</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #0004ff;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="main">
<!-- Add onclick as an attribute of the button -->
<button id="button" onclick="alert('Perform click actions with onclick attribute.')">Default button</button>
</main>
</body>
Ausgang:
In einem <script>-Element können Sie die Schaltfläche auswählen und als Attribut onclick hinzufügen. Gleichzeitig können Sie dem Button mit addEventListener auch einen Click-Event-Listener hinzufügen.
Im Folgenden hat der HTML-Button also das Attribut onclick und addEventListener. Daher erhalten Sie zwei JavaScript-Warnmeldungen, wenn Sie auf die Schaltfläche klicken.
Beispielcode:
<head>
<meta charset="utf-8">
<title>1-onlick-HTML-attribute-addEventlistener-Via-Script-Element-V2</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #6800ff;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="main">
<button id="button">Default button</button><br/>
</main>
<script>
let button = document.getElementById('button');
// Here, we are in the <script> element, we can
// also add onclick to the button
button.onclick = function() {
alert("Perform click actions with onclick.")
}
// Also add click event via addEventListener
button.addEventListener("click", function() {
alert("Perform click actions with addEventListener");
}, false);
</script>
</body>
Ausgang:
Sie können mehrere addEventListener auf einem Element haben, aber nur einen onclick
Mit dem addEventListener können Sie mehrere Click-Events an ein Element anhängen. Sie können einem Element jedoch nur ein einziges onclick-Attribut zuweisen.
In der Zwischenzeit führt ein Element alle Klickereignisse aus, die über addEventListener hinzugefügt wurden. Wenn also ein Element drei Click-Events via addEventListener hat, werden alle ausgeführt, wenn Sie auf das Element klicken.
Der HTML-Button hat zwei Click-Events via addEventListener im Code unten. Wenn Sie auf die Schaltfläche klicken, werden alle Klickereignisse ausgeführt.
Als Ergebnis sehen Sie in Ihrem Webbrowser zwei JavaScript-Warnmeldungen.
Beispielcode:
<head>
<meta charset="utf-8">
<title>2-Multiple-Events-With-addEventListener-One-with-Onclick</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #ff0054;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="main">
<button id="button">Default button</button><br/>
</main>
<script>
let button = document.getElementById('button');
// Also add click event via addEventListener
button.addEventListener("click", function () {
alert("Perform First click action with addEventListener");
}, false);
// Yet another click event via addEventListener
button.addEventListener("click", function () {
alert("Perform Second click action with addEventListener");
}, false);
</script>
</body>
Ausgang:
Wir haben erwähnt, dass Sie nur einen onclick auf ein Element haben können. Was passiert jedoch, wenn Sie mehr als eine haben? Welcher onclick läuft?
Mehrere onclick-Attribute überschreiben sich gegenseitig
Nur letzteres funktioniert, wenn Sie mehrere onclick auf ein einzelnes Element haben. Das liegt daran, dass onclick ein Elementattribut ist, also kann nur eines auf dem Element existieren.
Daher führt Ihr Webbrowser den letzten nur aus, wenn Sie einem Element mehr als einen onclick hinzufügen.
Also haben wir im folgenden Code zwei Click-Events via onclick hinzugefügt. Wenn Sie den Code in Ihrem Webbrowser ausführen, bemerken Sie währenddessen die JavaScript-Warnung für den letzten onclick.
Beispielcode:
<head>
<meta charset="utf-8">
<title>3-Overwrite onClick</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #a03c32;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="main">
<button id="button">Default button</button><br/>
</main>
<script>
let button = document.getElementById('button');
// Define a first click event with onclick
button.onclick = function () {
alert("Perform First click action with addEventListener");
}
// Define another click event with onclick.
// Meanwhile, this one overwrites the first one.
button.onclick = function () {
alert("The second onclick runs, not the first!!!");
}
</script>
</body>
Ausgang:
ein String-Wert von Element.onclick schlägt stillschweigend fehl; addEventListener wirft einen Fehler
Wenn der Funktionswert von onclick in einem <script>-Element ein String ist, schlägt er stillschweigend fehl. Allerdings tritt ein Fehler auf, wenn Sie anstelle der Funktion in addEventListener einen String übergeben.
Im folgenden Beispiel haben wir die Zeichenfolge Sag was? als Wert von button.onclick. Derselbe String, Say what?, steht derweil auch an der Position der Funktion in addEventListener.
Sie erhalten einen TypeError in der Konsole, wenn Sie den Code ausführen. Außerdem passiert nichts, wenn Sie auf die Schaltfläche klicken, es gibt keinerlei Fehler.
Das liegt daran, dass onclick statt einer Funktion einen String-Wert hat. Derweil wirft addEventListener bereits beim ersten Durchlauf des Codes einen Fehler.
Beispielcode:
<head>
<meta charset="utf-8">
<title>4-Onclick-does-not-respond-to-Errors</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #4aa032;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="main">
<button id="button">Default button</button><br/>
</main>
<script>
let button = document.getElementById('button');
// This will not throw an error.
button.onclick = "Say what?";
// This throws an error.
button.addEventListener("click", "Say what?")
</script>
</body>
Ausgang:
addEventListener gibt Ihnen die Kontrolle über die Anzahl der Klicks; Onclick ist immer verfügbar
addEventListener akzeptiert einen booleschen Wert namens once. Dieser Wert gibt an, wie oft der Listener ausgeführt wird.
Wenn Sie also once als true angeben, wird der Event-Listener nach seiner ersten Ausführung automatisch entfernt. Im folgenden Code hat der Button über onclick und addEventListener ein Click-Event.
In der Zwischenzeit hat der addEventListener den booleschen Wert once auf true gesetzt. Wenn Sie zum ersten Mal auf die Schaltfläche klicken, erhalten Sie daher zwei JavaScript-Warnmeldungen.
Nachfolgende Klicks zeigen jedoch nur das Click-Event von onclick. Das liegt daran, dass der addEventListener nicht mehr existiert.
Beispielcode:
<head>
<meta charset="utf-8">
<title>5-Control-addEventListeners-onlclick-always-run</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #5f32a0;
color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<main id="main">
<button id="button">Default button</button><br/>
</main>
<script>
let button = document.getElementById('button');
// Attach click event via onclick that'll always
// run every time you click the button.
button.onclick = function () {
alert("I always run. Click OK and click the button again.")
}
// We'll execute this function one time, with addEventListener
function sayOnce () {
alert("This is the only time you'll see me. Good Bye.");
}
// You can pass a third Boolean value to addEventListener
// This boolean value defines the number of times you
// the event listener can work on the element. Here,
// the event listener will work once.
button.addEventListener("click", sayOnce, { once: true })
</script>
</body>
Ausgang:
onclick kann ein Speicherleck verursachen; addEventListener wird mit dem Element entfernt
Wenn Sie ein Element mit einem Click-Event via onclick entfernen, bleiben onclick und sein Wert im Speicher. Überprüfen Sie zur Bestätigung element.onclick im Array der entfernten Knoten des MutationObserver.
Das element ist der entfernte Knoten mit angehängtem onclick. Außerdem müssen Sie dafür einen MutationObserver einrichten.
Die beiden HTML-Buttons haben Klick-Events via onclick im folgenden Code. In der Zwischenzeit wird durch Klicken auf den Eltern-Button entfernen der Eltern-Button entfernt.
Allerdings protokollieren wir mit MutationObserver den onclick des Parent Button an die Konsole. Dies beweist, dass der onclick auch nach dem Löschen des Parent Button noch existiert.
<head>
<meta charset="utf-8">
<title>6-Memory-Leak-via-Onclick.html</title>
<style>
body {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
padding: 1.2em;
background-color: #8832a0;
color: #ffffff;
border: none;
cursor: pointer;
margin-top: 0.2em;
}
</style>
</head>
<body>
<main id="main">
<button id="parent_button">Parent Button</button><br/>
<button id="remove_parent_button">Remove Parent Button</button>
</main>
<script>
let main = document.getElementById('main');
let parent_button = document.getElementById('parent_button');
let remove_parent_button = document.getElementById('remove_parent_button');
// Add a function via onclick
parent_button.onclick = function amIleaking() {
alert("This onclick function exist after the Parent button dies. \n Remove the Parent button, and Check the console!.");
}
// Setup a mutation observer to observe changes
// in the DOM.
const observer = new MutationObserver(function(mutations_list) {
mutations_list.forEach(function(mutation) {
mutation.removedNodes.forEach(function(removed_node) {
if (removed_node.id === 'parent_button') {
console.log('#parent_button has been removed');
observer.disconnect();
}
// Even after removal, the onclick function
// is available in the removedNodes. Here, [0]
// represents the first element of the removed
// node, which the parent_button.
console.log(mutation.removedNodes[0].onclick);
/*To see the function details in Firefox
console.log(mutation.removedNodes[0].onclick.toString());*/
});
});
});
// Observe changes in the main element. Meanwhile,
// the main element consists of the parent button
// and the button that removes it.
observer.observe(document.querySelector("#main"), { subtree: false, childList: true });
// Setup onclick to remove the parent button
remove_parent_button.onclick = function () {
document.querySelector("#parent_button").remove();
}
</script>
</body>
Ausgang:
addEventListener funktioniert nicht in IE<9; onclick Funktioniert in IE<9
Wenn Sie IE<9 unterstützen möchten, funktioniert addEventListener nicht. Das liegt daran, dass IE<9 das nicht standardmäßige attachEvent unterstützt.
Trotzdem können Sie eine Hilfsfunktion schreiben, wenn Sie IE<9 unterstützen möchten. Diese Funktion prüft, ob der Webbrowser attachEvent oder addEventListener unterstützt.
Wenn der Browser also attachEvent unterstützt, verwenden Sie attachEvent; Andernfalls verwenden Sie addEventListener. In der Zwischenzeit können Sie sich immer auf onclick verlassen, um im IE<9 zu arbeiten.
Sie können also den folgenden Code verwenden, wenn Sie IE<9 unterstützen möchten.
Beispielcode:
// Define an addEvent function and check if
// the element supports attachEvent. Otherwise
// we use addEventListner.
function add_event(element, evnt, funct) {
if (element.attachEvent) { // element supports attachEvent
return element.attachEvent('on' + evnt, funct);
} else { // Element does not support attachEvent
// Use addEventListnere instead
return element.addEventListener(evnt, funct, false);
}
}
// How you can use it
add_event(document.getElementById('HTMLElement'), 'click', function() {
alert('Hello World!');
});
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn