addEventListener frente a Onclick en JavaScript
Este artículo explica las diferencias entre JavaScript addEventListener y onclick.
addEventListener frente a onclick en JavaScript
Aunque tanto addEventListener como onclick pueden servir para el mismo propósito, hay algunos matices que debes conocer.
Entonces, de eso se trata este artículo. Además, acompañaremos nuestras explicaciones con ejemplos de código.
onclick es un atributo HTML; addEventListener solo funciona en el elemento <Script>
onclick es un atributo HTML para que pueda agregarlo directamente a un elemento HTML o dentro del elemento <script>. Mientras tanto, solo puede usar addEventListener dentro del elemento <script>.
Por ejemplo, hemos agregado onclick como un atributo del elemento botón en el siguiente código. No solo eso, el valor de onclick es un mensaje de alerta de JavaScript.
Por lo tanto, cuando haga clic en el botón, observará una alerta de JavaScript en su navegador web. Sin embargo, no puede agregar addEventListener como un atributo HTML.
Código de ejemplo:
<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>
Producción:
En un elemento <script>, puede seleccionar el botón y agregar onclick como su atributo. Al mismo tiempo, también puede agregar un detector de eventos de clic al botón usando addEventListener.
Entonces, a continuación, el botón HTML tiene el atributo onclick y addEventListener. Como resultado, recibirá dos mensajes de alerta de JavaScript cuando haga clic en el botón.
Código de ejemplo:
<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>
Producción:
Puede tener varios addEventListener en un elemento, pero solo uno onclick
El addEventListener le permite adjuntar múltiples eventos de clic a un elemento. Sin embargo, solo puede adjuntar un único atributo onclick a un elemento.
Mientras tanto, un elemento ejecutará todos los eventos de clic agregados a través de addEventListener. Entonces, si un elemento tiene tres eventos de clic a través de addEventListener, todos se ejecutarán cuando haga clic en el elemento.
El botón HTML tiene dos eventos de clic a través de addEventListener en el código a continuación. Al hacer clic en el botón, se ejecutarán todos los eventos de clic.
Como resultado, observará dos mensajes de alerta de JavaScript en su navegador web.
Código de ejemplo:
<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>
Producción:
Hemos mencionado que solo puede tener un onclick en un elemento. Sin embargo, ¿qué sucede cuando tienes más de uno? ¿Qué onclick se ejecutará?
Múltiples atributos onclick se sobrescriben entre sí
Solo el último funciona si tiene múltiples onclick en un solo elemento. Esto se debe a que onclick es un atributo de elemento, por lo que solo puede existir uno en el elemento.
Por lo tanto, su navegador web solo ejecutará el último si agrega más de un onclick a un elemento.
Entonces, hemos agregado dos eventos de clic a través de onclick en el siguiente código. Mientras tanto, cuando ejecute el código en su navegador web, notará la alerta de JavaScript para el último onclick.
Código de ejemplo:
<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>
Producción:
un valor de cadena de Element.onclick falla silenciosamente; addEventListener arroja un error
Si el valor de la función onclick en un elemento <script> es una cadena, fallará silenciosamente. Sin embargo, se produce un error si proporciona una cadena en lugar de la función en addEventListener.
En el siguiente ejemplo, tenemos la cadena ¿Decir qué? como el valor de button.onclick. Mientras tanto, la misma cadena, ¿Decir qué?, también está en la posición de la función en addEventListener.
Obtendrá un TypeError en la consola cuando ejecute el código. Además, si hace clic en el botón, no pasa nada, no hay ningún error.
Eso es porque onclick tiene un valor de cadena en lugar de una función. Mientras tanto, addEventListener ya arroja un error en la primera ejecución del código.
Código de ejemplo:
<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>
Producción:
addEventListener le da control sobre el número de clics; Onclick está siempre disponible
addEventListener acepta un valor booleano llamado once. Este valor determina el número de veces que se ejecutará el detector.
Entonces, cuando especifica “una vez” como “true”, el detector de eventos se elimina automáticamente después de su primera ejecución. En el siguiente código, el botón tiene un evento de clic a través de onclick y addEventListener.
Mientras tanto, addEventListener tiene el booleano once establecido en true. Como resultado, cuando haga clic en el botón por primera vez, recibirá dos mensajes de alerta de JavaScript.
Sin embargo, los clics posteriores solo muestran el evento de clic de onclick. Eso es porque el addEventListener ya no existe.
Código de ejemplo:
<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>
Producción:
onclick puede causar una pérdida de memoria; addEventListener se elimina con el elemento
Cuando elimina un elemento con un evento de clic a través de onclick, el onclick y su valor permanecen en la memoria. Compruebe element.onclick en la matriz de nodos eliminados del MutationObserver para confirmar.
El elemento es el nodo eliminado con onclick adjunto. Además, tendrás que configurar un MutationObserver para lograrlo.
Los dos botones HTML tienen eventos de clic a través de onclick en el siguiente código. Mientras tanto, al hacer clic en Eliminar botón principal se elimina el Botón principal.
Sin embargo, con MutationObserver, registramos el onclick del Botón principal en la consola. Esto prueba que el onclick aún existe incluso después de eliminar el Botón principal.
<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>
Producción:
addEventListener no funciona en IE<9; onclick Funciona en IE<9
Si desea admitir IE<9, addEventListener no funcionará. Eso es porque IE<9 admite el attachEvent no estándar.
Sin embargo, puede escribir una función de utilidad si desea admitir IE<9. Esta función comprobará si el navegador web admite attachEvent o addEventListener.
Por lo tanto, si el navegador admite attachEvent, utilizará attachEvent; de lo contrario, usará addEventListener. Mientras tanto, siempre puede contar con onclick para trabajar en IE<9.
Por lo tanto, puede usar el siguiente código si desea admitir IE<9.
Código de ejemplo:
// 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