DOM ( Document Object Model ) , una interfaz de programación que se utiliza para conectar páginas web a scripts representando la estructura de un documento como documentos HTML . Define la forma en que se debe acceder y manipular un documento y también define la estructura lógica de los documentos.
La forma en que DOM representa un documento es con un árbol lógico ( DOM Tree ).
Para proporcionar una interfaz dinámica a una página web, usamos eventos en JavaScript . Estos eventos se adjuntan a elementos en el DOM ( Document Object Model ). De forma predeterminada, los eventos usan propagación burbujeante, es decir, de niños a padres. Los eventos se pueden vincular en línea o en el script externo (archivo JavaScript).
Usando DOM y Eventos: Supongamos que queremos hacer cambios en el documento o la hoja de estilo en un evento determinado. El evento puede ser la carga de una página web, la selección de algún elemento específico o el envío de un formulario, etc.
Algunos atributos de eventos comunes son los siguientes.
- Atributos de eventos de ventana: estos eventos se activan para el objeto de ventana.
- Eventos del mouse: estos son los eventos más comunes con interacción básica del usuario a través del mouse.
- onclick : se activa cuando se activa un clic del mouse en un elemento.
- onmouseover : se dispara cuando el puntero del mouse se mueve sobre un elemento.
- ondblclick : se dispara con un doble clic del mouse en el elemento
- Eventos de teclado:
- onkeydown: se activa cuando el usuario presiona una tecla específica
- onkeyup: se dispara cuando un usuario suelta una tecla específica
Ejemplo 1: en este ejemplo, adjuntamos un detector de eventos a nuestro contenedor. Cuando ocurre el evento de clic , el color del texto dentro del contenedor cambia de blanco a negro.
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM and Events</title>
<style>
.container {
height: 150px;
width: 300px;
background-color: green;
text-align: center;
color: white;
font-size: 30px;
margin: auto;
font-weight: bolder;
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>
</head>
<body>
<div class="container">GeeksforGeeks</div>
<script>
let container = document.querySelector('.container');
container.addEventListener('click', function(e) {
container.style.color = "black";
});
</script>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, se está produciendo un evento de teclado , estamos adjuntando un detector de eventos en nuestro elemento de entrada. Cuando el usuario está presionando una tecla ‘Enter’, se muestra un mensaje al usuario que dice «Usted presionó una tecla Enter».
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM and Events</title>
<style>
* {
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>
</head>
<body>
<h3>
Message will be displayed when
you press a Enter key
</h3>
<input type="text" class="inputArea">
<p></p>
<script>
let input = document.querySelector(".inputArea");
let p = document.querySelector("p");
input.addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
p.textContent = "You pressed an Enter";
}
})
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por siddharthredhu01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA