L' esdeveniment mouseenter en JavaScript és una funció popular i d'ús comú que s'activa quan el punter del ratolí entra a l'element seleccionat. Normalment s'utilitza per a la interactivitat a les pàgines web, millorant l'experiència de l'usuari proporcionant una resposta instantània al passar el cursor del ratolí. Aquest article explorarà l'esdeveniment mouseenter en profunditat, discutirà els seus usos, com funciona i proporcionarà una guia pas a pas sobre com utilitzar-lo al vostre codi.
Explorant l'esdeveniment d'entrada del ratolí de JavaScript
Pel que fa a la gestió d'esdeveniments en JavaScript, l' esdeveniment mouseenter juga un paper destacat, especialment a l'hora de proporcionar comentaris interactius sobre els elements de la pàgina web. En comparació amb altres esdeveniments del ratolí, mouseenter ocupa una posició única. A diferència d' onmouseover , un altre esdeveniment de JavaScript ben conegut, l' esdeveniment mouseenter només s'activa quan el punter del ratolí entra a l'element especificat i no apareix des dels elements fills.
element.addEventListener("mouseenter", function(){
// code to be executed
});
La solució: incorporar mouseenter al vostre codi
Incorporar mouseenter al codi JavaScript és bastant senzill.
let enterElement = document.querySelector('.enter');
enterElement.addEventListener("mouseenter", function(){
enterElement.style.color = "red";
});
Aquest codi fa una cosa senzilla: quan passeu el ratolí per l'element amb la classe "enter", el color del text d'aquest element es torna vermell.
Aprofundir més: explicació del codi pas a pas
Pas 1: Primer, seleccionem l'element al qual volem aplicar l'esdeveniment mouseenter . Això s'aconsegueix mitjançant el mètode querySelector.
- let enterElement = document.querySelector('.enter');
Pas 2: A continuació, apliquem el mètode addEventListener per adjuntar l'esdeveniment mouseenter a l'element seleccionat, especificant la funcionalitat en una funció.
- enterElement.addEventListener ("introductor del ratolí", function(){…
Pas 3: Dins de la funció mouseenter , definim què passa quan el punter del ratolí entra a l'element. En aquest cas, el color del text de l'element canviarà a vermell.
- enterElement.style.color = "vermell";
Biblioteques i funcions rellevants
Tot i que l'esdeveniment mouseenter forma part fonamentalment de JavaScript, també és compatible amb biblioteques de JavaScript, com ara jQuery . El concepte és el mateix; tanmateix, la sintaxi és lleugerament diferent. El codi equivalent a jQuery tindria aquest aspecte:
$(".enter").mouseenter(function(){
$(this).css("color", "red");
});
En resum, l' esdeveniment mouseenter proporciona una manera extremadament útil de millorar la naturalesa interactiva de les vostres pàgines web, amb una configuració i implementació senzilles. La manera com utilitzeu aquest esdeveniment només està limitada per la vostra creativitat.
