Los detectores de eventos en DOM

Aquí, vamos a aprender acerca de los oyentes de eventos en DOM (Document elementos del modelo) con ejemplos.

Para implementar funcionalidades complejas class una aplicación web dinámica, detectores de eventos se utilizan en lugar de simplemente conectar directamente los eventos a los elementos DOM. los desarrolladores de JavaScript en su mayoría se mantenga alejado de marcas. for ejemplo, un desarrollador que trabaja en un proyecto rara vez mirar el HTML. En esos escenarios, los detectores de eventos se utilizan ampliamente ya que se puede conectar directamente a un detector de eventos a cualquier elemento DOM a partir de la secuencia de comandos. En este artículo, veremos cómo añadir detectores de eventos a los elementos DOM utilizando JavaScript.

Puede añadir detectores de eventos a cualquier objeto DOM . Esto significa que el objeto DOM necesidad no ser necesariamente un elemento DOM, también se pueden añadir detectores de eventos al objeto de ventana. Añadimos los detectores de eventos a un elemento utilizando el método addEventListener () .

El For sintaxis general adjuntando los detectores de eventos es,

    element.addEventListener(event type, callback function);

En primer lugar, agarrar un elemento HTML mediante la consulta del DOM y asignamos el método addEventListener () en la misma. Este método tiene tres parámetros, sin embargo, nos fijamos únicamente en lo esencial dos. El primero es el tipo de evento, ex clic, el enfoque, enviar, etc y el segundo parámetro es una función de devolución de llamada que se disparará una vez que se ha activado el evento.

El método addEventListener () nos permite adjuntar tantos detectores de eventos, ya que queremos tantos elementos DOM que queremos. Esto significa que se pueden adjuntar los mismos detectores de eventos a múltiples elementos o múltiples detectores de eventos al mismo elemento.

Vamos a ver un ejemplo sencillo de unir un detector de eventos a un elemento DOM .

Crear un archivo index.html con la plantilla de arranque siguiente,

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Events in DOM</title>
</head>
<body>
<h1>Event Listeners</h1>
<hr>
<hr>
<div class="container">
<p>This button will trigger an alert </p>
<button>Click me!</button>
</div>
</body>
<script>
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
alert('This button was clicked!');
})
</script>
</html>

copiar algunos estilos básicos a la styles.css archivo,

body {
background: mintcream;
}
h1 {
padding: 20px 20px;
margin: 10px auto;
text-align: center;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
p {
padding: 10px 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: chocolate;
font-size: 22px;
}
.container {
text-align: center;
}
button {
padding: 10px;
background: violet;
color: white;
border: 2px solid salmon;
border-radius: 6px;
cursor: pointer;
}

salida

Event Listeners in DOM - 4

Nosotros mostrar una alerta () de clic en el botón por lo que necesitamos para conectar un detector de eventos en nuestro objeto de botón.

<script>
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
alert('This button was clicked!');
})
</script>

salida

Event Listeners in DOM - 5

También puede eliminar un detector de eventos utilizando el removeEventListener () método.

quitar Vamos al oyente caso ahora. for que, tenemos que crear una función separada en la que podemos llamar nuestra alerta () y pasar esa función invocación como segundo parámetro en nuestro gestor de eventos.

<script>
const btn=document.querySelector('button');
btn.addEventListener('click',showAlert());
function showAlert(){
alert('This button was clicked!');
}
btn.removeEventListener('click',showAlert());
</script>

Ahora ya no obtenemos una alerta al hacer clic en el botón.

De esta manera podemos conectar fácilmente detectores de eventos a los elementos DOM .

Veamos otro ejemplo de cómo podemos añadir un detector de eventos al objeto de ventana.

Añadir otra & lt; div & gt; en el index.html . Vamos a añadimos un poco de lorem ipsum en este & lt; div & gt; al redimensionar el navegador.

<div class="para">
</div>

Ahora vamos a llegar referencia a la presente & lt; div & gt; ,

    const para=document.querySelector('.para');

Incluiremos de un detector de eventos del tipo de cambio de tamaño para el objeto de la ventana y en el interior vamos a añadir una cadena de plantilla con un poco de lorem ipsum incrustado en un & lt; p & gt; .

const para=document.querySelector('.para');
window.addEventListener('resize',()=>{
para.innerHTML='<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro illum aut tenetur, laudantium dolor quo recusandae et doloremque esse sit impedit soluta eligendi quibusdam dolores enim magni tempore, eius velit.</p>'
})

Se puede ver ahora que el cambio de tamaño en su navegador usted consigue un poco lorem ipsum en la página.

salida

Event Listeners in DOM - 6


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *