Método jQuery .on(): este método se utiliza para adjuntar un detector de eventos a un elemento. Este método es equivalente a addEventListener en JavaScript estándar.
Sintaxis:
$(element).on(event, childSelector, data, function)
Parámetro
- evento: Especifica el evento a adjuntar (clic, enviar, etc.).
- childSelector: es un parámetro opcional y especifica el elemento secundario específico para el que se puede usar el controlador de eventos dado.
- datos: especifica datos opcionales que se pasarán junto con la función.
- función: especifica la función que se ejecutará mientras se activa el evento adjunto.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<!-- Adding jQuery Library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<style>
/* Adding basic styling */
div {
background-color: green;
width: 100px;
height: 100px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div>Normal</div>
<script>
$('div').on('click', function () {
// Changing the content
$(this).html('Clicked!');
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el elemento div:
- Después de hacer clic en el elemento div:
Método jQuery .hover(): este método se usa para especificar los estilos del elemento durante las condiciones de mouseover y mouseout . Toma dos funciones como argumento:
- mouseoverFunction: se activa cuando el mouse ingresa al elemento.
- mouseoutFunction: se activa cuando el mouse abandona el elemento.
Puede especificar múltiples estilos dentro de estas funciones.
Sintaxis:
$(element).hover(mouseoverFunction, mouseoutFunction)
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<!-- Adding jQuery Library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<style>
/* Adding basic styling */
div {
background-color: green;
width: 100px;
height: 100px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div>Normal</div>
<script>
$('div').hover(function () { // mouse-in
$(this).css("background-color", "blue");
$(this).html('Hovered!');
},
function () { // mouse-out
$(this).css("background-color", "green");
$(this).html('Normal');
}
)
</script>
</body>
</html>
Producción:
- Antes de que el mouse se mueva:
- Después de mover el mouse sobre:
Publicación traducida automáticamente
Artículo escrito por frikishaan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA