AddEventListener () y onclick escuchan un evento. Ambos pueden ejecutar una función de devolución de llamada cuando se hace clic en un botón. Sin embargo, no son lo mismo. En este artículo, vamos a entender las diferencias entre ellos.
addEventListener() : el método addEventListener() adjunta un controlador de eventos al elemento especificado.
Sintaxis:
element.addEventListener(event, listener, useCapture);
Parámetros:
- evento: el evento puede ser cualquier evento de JavaScript válido. Los eventos se usan sin el prefijo «on», como «clic» en lugar de «onclick» o «mousedown» en lugar de «onmousedown».
- listener (función de controlador): Puede ser una función de JavaScript que responde al evento que ocurre.
- useCapture: (parámetro opcional) Un valor booleano que especifica si el evento debe ejecutarse en la fase de captura o burbujeo.
Nota: El método addEventListener() puede tener varios controladores de eventos aplicados al mismo elemento. No sobrescribe otros controladores de eventos.
Ejemplo: a continuación se muestra un código JavaScript para mostrar que varios eventos están asociados con un elemento y no se sobrescribe.
HTML
<!DOCTYPE html>
<html>
<body>
<button id="btn">Click here</button>
<h1 id="text1"></h1>
<h1 id="text2"></h1>
<script>
let btn_element = document.getElementById("btn");
btn_element.addEventListener("click", () => {
document.getElementById("text1")
.innerHTML = "Task 1 is performed";
})
btn_element.addEventListener("click", () => {
document.getElementById("text2")
.innerHTML = "Task 2 is performed";
});
</script>
</body>
</html>
Producción:
onclick : el atributo de evento onclick funciona cuando el usuario hace clic en el botón. Cuando se hace clic con el mouse en el elemento, se ejecuta el script.
Sintaxis:
<element onclick="myScript">
En JavaScript:
object.onclick = function(){myScript};
El onclick es solo una propiedad. Como todas las propiedades de los objetos, si escribimos más de una propiedad, se sobrescribirá.
Ejemplo: a continuación se muestra un código JavaScript para mostrar que no se pueden asociar varios eventos con un elemento, ya que se sobrescribe
HTML
<!DOCTYPE html>
<html>
<body>
<button id="btn">Click here</button>
<h1 id="text1"></h1>
<h1 id="text2"></h1>
<script>
let btn_element = document.getElementById("btn");
btn_element.onclick = () => {
document.getElementById("text1")
.innerHTML = "Task 1 is performed";
};
btn_element.onclick = () => {
document.getElementById("text2")
.innerHTML = "Task 2 is performed";
};
</script>
</body>
</html>
Producción:
Diferencia entre addEventListener y onclick:
|
agregarEventListener |
al hacer clic |
| addEventListener puede agregar múltiples eventos a un elemento en particular. | onclick puede agregar solo un evento a un elemento. Es básicamente una propiedad, por lo que se sobrescribe. |
| addEventListener puede tomar un tercer argumento que puede controlar la propagación del evento. | La propagación de eventos no se puede controlar mediante onclick. |
| addEventListener solo se puede agregar dentro de los elementos <script> o en un archivo JavaScript externo. | onclick también se puede agregar como un atributo HTML. |
| addEventListener no funciona en versiones anteriores de Internet Explorer, que en su lugar usa addedEvent. | onclick funciona en todos los navegadores. |
Publicación traducida automáticamente
Artículo escrito por ArifShaikh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA