Javascript es un lenguaje de secuencias de comandos del lado del cliente de tipo dinámico, interpretado y de alto nivel. HTML es estático y Javascript se usa para agregar funcionalidad al código HTML estático. Los eventos HTML son manejados por JavaScript. Cuando ocurre un evento, requiere que se tome alguna acción. Esta acción se puede lograr a través de controladores de eventos de JavaScript. Además de JavaScript, jQuery, que es equivalente a JavaScript en términos de funcionalidad, también se puede usar para desenstringr eventos en un documento HTML. Para trabajar en eventos de activación de JavaScript, es importante saber qué es un evento. Un evento es una interacción entre JavaScript y HTML. Algunos eventos HTML comunes son los siguientes:
- onload: se activa cuando el navegador completa la carga de una página
- onchange: Se activa cuando cambia un elemento HTML.
- onclick: se activa cuando se hace clic en un elemento HTML.
- onmouseover: se activa cuando se mueve el mouse sobre un elemento HTML.
- onmouseout: se activa cuando el mouse se mueve fuera de un elemento HTML.
Los eventos se pueden manejar a través del método addEventListener() o podemos desenstringr eventos en componentes individuales definiendo funciones específicas de JavaScript. Consideremos los siguientes ejemplos:
Usando el método document.addEventListener()
Sintaxis:
document.addEventListener(event, function, phase)
Parámetros:
- event: Parámetro obligatorio. Especifica el nombre del evento.
- función: Parámetro obligatorio. Especifica la función que se supone que debe manejar el evento.
- fase: este es un parámetro opcional y acepta un valor booleano. Si se pasa el valor verdadero, el controlador de eventos se ejecuta en la fase de captura y si se pasa el valor falso, el controlador de eventos se ejecuta en la fase de burbujeo. Si un elemento es un elemento secundario y desenstring un evento, el evento se registra tanto para el elemento principal como para el secundario. Si el valor de la fase se pasa como verdadero, el controlador de eventos primero lo ejecuta el elemento principal (fase de captura) y si se pasa falso, el elemento secundario ejecuta primero el controlador de eventos. De forma predeterminada, se pasa false como valor de fase.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<body>
<h3>Click on the page to trigger click event</h3>
<h3>Click on the page to trigger mouseover event</h3>
<h3>Click on the page to trigger mouseoutevent</h3>
<script type="text/javascript">
document.addEventListener("click", function() {
alert("You clicked inside the document");
});
document.addEventListener("mouseover", function() {
document.body.style.backgroundColor = "lavender";
});
document.addEventListener("mouseout", function() {
document.body.style.backgroundColor = "white";
});
</script>
</body>
</html>
Producción
Desenstringr evento de mouseover:
Desenstringr evento mouseout:
Evento de clic de activación:
Explicación: En este ejemplo, cuando el mouse se mueve sobre el documento, el color de fondo del documento cambia a lavanda. Cuando se mueve el mouse hacia afuera, el color de fondo del documento cambia de nuevo a blanco. Y cuando el usuario hace clic en cualquier lugar dentro del documento, aparece una alerta. Estas acciones son manejadas por controladores de eventos que se activan cuando ocurre un evento.
Ejemplo 2: desenstringr eventos en elementos individuales
HTML
<!DOCTYPE html>
<html>
<body>
<button onclick="clickFunction()">
Click Me
</button>
<br><br>
<div class="container" id="myDiv"
onmouseenter="enterFunction()"
onmouseleave="leaveFunction()">
Hello World...How are you
</div>
<script type="text/javascript">
function clickFunction(){
document.body.style
.backgroundColor = "pink";
}
function enterFunction(){
document.getElementById("myDiv")
.style.border = "1px solid black";
}
function leaveFunction(){
document.getElementById("myDiv")
.style.border = "2px solid blue";
}
</script>
</body>
</html>
Producción:
Haga clic en el botón: 
Mueva el mouse sobre la página
Explicación Aquí, los elementos individuales en el documento HTML desenstringn diferentes eventos y esos eventos invocan diferentes funciones de JavaScript. La lógica para manejar los eventos se especifica en las funciones. Cuando se hace clic en el botón, cambia el color de fondo de la página web. Los otros eventos que se manejan son mouseenter y mouseleave. Cuando el mouse ingresa al contenedor con una identificación llamada myDiv, el borde de la división se vuelve negro. Cuando el ratón sale del contenedor, el borde de la división se vuelve azul.
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA