JavaScripti mouseenteri sündmus on populaarne ja sageli kasutatav funktsioon, mis käivitatakse hiirekursori sisenemisel valitud elemendile. Tavaliselt kasutatakse seda veebilehtedel interaktiivsuse parandamiseks, parandades kasutajakogemust, pakkudes kohest reageeringut hiire liigutamisele. See artikkel uurib mouseenteri sündmust põhjalikult, arutades selle kasutusvõimalusi ja toimimist ning pakkudes samm-sammult juhiseid selle kasutamiseks oma koodis.
JavaScripti hiire sisestamise sündmuse uurimine
JavaScripti sündmuste käsitlemisel mängib sündmus mouseenter silmapaistvat rolli, eriti veebilehe elementide interaktiivse tagasiside andmisel. Võrreldes teiste hiiresündmustega on mouseenteril ainulaadne positsioon. Erinevalt teisest tuntud JavaScripti sündmusest onmouseover , käivitub sündmus mouseenter ainult siis, kui hiirekursor siseneb määratud elementi, ega kerki üles alamelementidest.
element.addEventListener("mouseenter", function(){
// code to be executed
});
Lahendus: lisage hiireklahvi oma koodi
Mouseenteri lisamine oma JavaScripti koodi on üsna lihtne.
let enterElement = document.querySelector('.enter');
enterElement.addEventListener("mouseenter", function(){
enterElement.style.color = "red";
});
See kood teeb lihtsa asja – kui liigutate hiirekursorit elemendi kohal klassiga "enter", muutub selle elemendi tekstivärv punaseks.
Süvenemine: Koodi samm-sammuline selgitus
1. samm: Kõigepealt valime elemendi, millele soovime, et mouseenter sündmus rakenduks. Selleks kasutatakse querySelector meetodit.
- let enterElement = document.querySelector('.enter');
2. samm: Seejärel rakendame meetodit addEventListener , et lisada valitud elemendile sündmus mouseenter , määrates funktsiooni funktsionaalsuse.
- enterElement.addEventListener(“hiiresisestaja”, function(){…
3. samm: Funktsioonis mouseenter defineerime, mis juhtub, kui hiirekursor siseneb elementi. Antud juhul muutub elemendi teksti värv punaseks.
- enterElement.style.color = "punane";
Asjakohased raamatukogud ja funktsioonid
Kuigi mouseenteri sündmus on põhimõtteliselt JavaScripti osa, toetatakse seda ka JavaScripti teekides, näiteks jQuery's . Kontseptsioon on sama, kuid süntaks on veidi erinev. Vastav kood jQuerys näeks välja selline:
$(".enter").mouseenter(function(){
$(this).css("color", "red");
});
Kokkuvõttes pakub sündmus mouseenter äärmiselt kasulikku viisi oma veebilehtede interaktiivsuse suurendamiseks lihtsa seadistamise ja rakendamisega. Selle sündmuse kasutamise viis on piiratud ainult teie loovusega.
