Con la ayuda de los controladores de eventos, podemos configurar el evento particular disponible en jQuery en el elemento HTML. En jQuery, hay varios eventos disponibles, como click() , mouseover() , dblclick() , etc. En este artículo, aprenderemos cómo podemos adjuntar más de un controlador de eventos a los elementos. En jQuery, podemos agregar fácilmente uno o más controladores de eventos en cualquier elemento.
Ejemplo: en este ejemplo, agregaremos tres tipos diferentes de controladores de eventos en un div y verificaremos todos los eventos respectivamente. El primer evento será click(), cuando hagamos clic en el div, se reducirá, el segundo evento será dblclick(), cuando hagamos doble clic en el elemento div, aumentará en escala, el tercer evento será mouseover, cuando movemos nuestro puntero al div, cambiará su color. Así es como vamos a implementar tres controladores de eventos diferentes en un solo elemento div.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
/* Required css code */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: rgb(32, 32, 32);
}
.main {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#shape {
height: 200px;
width: 200px;
background-color: green;
border-radius: 100%;
margin: 100px;
}
</style>
</head>
<body>
<!-- Shape is inscribed in main container -->
<div class="main">
<div id="shape"></div>
</div>
<script>
// Required jQuery code
$(document).ready(function() {
$("#shape").click(function() {
$(this).animate({
height: "50px",
width: "50px"
});
});
$("#shape").dblclick(function() {
$(this).animate({
height: "300px",
width: "300px"
});
});
$("#shape").mouseover(function() {
$(this).css("background-color", "white");
});
});
</script>
</body>
</html>
Producción:
