mouseenter Tapahtuma JavaScriptissä on suosittu ja yleisesti käytetty toiminto, joka käynnistyy, kun hiiren osoitin tulee valitun elementin kohdalle. Sitä käytetään tyypillisesti vuorovaikutteiseen toimintaan verkkosivuilla, mikä parantaa käyttökokemusta antamalla välittömän vastauksen hiiren liikkumiseen. Tässä artikkelissa tutkitaan mouseenter-tapahtumaa perusteellisesti, keskustellaan sen käytöstä, sen toiminnasta ja annetaan vaiheittaiset ohjeet sen käyttämiseen koodissasi.
JavaScriptin hiiren syöttötapahtuman tutkiminen
Mitä tulee tapahtumien käsittelyyn JavaScriptissä, mouseenter tapahtumalla on merkittävä rooli, erityisesti vuorovaikutteisen palautteen antamisessa verkkosivun elementeistä. Verrattuna muihin hiiritapahtumiin, mouseenter ottaa ainutlaatuisen aseman. Toisin kuin hiiren päällä, toinen tunnettu JavaScript-tapahtuma, mouseenter tapahtuma laukeaa vain, kun hiiren osoitin tulee määritettyyn elementtiin, eikä se esiinny lapsielementeistä.
element.addEventListener("mouseenter", function(){
// code to be executed
});
Ratkaisu: Hiiren näppäimen sisällyttäminen koodiisi
sisältävät mouseenter JavaScript-koodiisi on melko yksinkertaista.
let enterElement = document.querySelector('.enter');
enterElement.addEventListener("mouseenter", function(){
enterElement.style.color = "red";
});
Tämä koodi tekee yksinkertaisen asian – kun siirrät hiiren osoittimella elementin päälle, jonka luokka on "enter", tämän elementin tekstin väri muuttuu punaiseksi.
Syvennys: vaiheittainen koodin selitys
Vaihe 1: Ensin kohdistamme elementtiin, jonka haluamme mouseenter haettava tapahtuma. Tämä saavutetaan käyttämällä querySelector menetelmällä.
- anna enterElement = document.querySelector('.enter');
Vaihe 2: Sitten käytämme addEventListener tapa kiinnittää mouseenter tapahtuma valittuun elementtiin, joka määrittää funktion toiminnallisuuden.
- enterElement.addEventListener("mouseenter", function(){…
Vaihe 3: Sisällä mouseenter funktiolla, määritämme mitä tapahtuu, kun hiiren osoitin tulee elementtiin. Tässä tapauksessa elementin tekstin väri muuttuu punaiseksi.
- enterElement.style.color = "punainen";
Asiaankuuluvat kirjastot ja toiminnot
Vaikka mouseenter-tapahtuma on pohjimmiltaan osa JavaScriptiä, sitä tuetaan myös JavaScript-kirjastoissa, kuten jQuery. Konsepti on sama; syntaksi on kuitenkin hieman erilainen. Vastaava koodi jQueryssa näyttäisi tältä:
$(".enter").mouseenter(function(){
$(this).css("color", "red");
});
Yhteenvetona mouseenter Tapahtuma tarjoaa erittäin hyödyllisen tavan parantaa verkkosivujesi interaktiivisuutta yksinkertaisella asennuksella ja toteutuksella. Tapaa, jolla käytät tätä tapahtumaa, rajoittaa vain luovuutesi.
