моусеентер догађај у ЈаваСцрипт-у је популарна и често коришћена функција која се покреће када показивач миша уђе у изабрани елемент. Обично се користи за интерактивност на веб страницама, побољшавајући корисничко искуство пружањем тренутног одговора на лебдење мишем. Овај чланак ће детаљно истражити догађај моусеентер, расправљати о његовој употреби, како функционише и пружити водич корак по корак о томе како да га користите у свом коду.
Истраживање ЈаваСцрипт-овог догађаја моусеентер
Када је у питању руковање догађајима у ЈаваСцрипт-у, моусеентер догађај игра истакнуту улогу, посебно у пружању интерактивних повратних информација о елементима веб странице. У поређењу са другим догађајима са мишем, моусеентер заузима јединствену позицију. за разлику од онмоусеовер, још један познати ЈаваСцрипт догађај, тхе моусеентер догађај се покреће само када показивач миша уђе у наведени елемент и не излази из подређених елемената.
element.addEventListener("mouseenter", function(){
// code to be executed
});
Решење: Укључивање миша у ваш код
укључивања моусеентер у ваш ЈаваСцрипт код је прилично једноставан.
let enterElement = document.querySelector('.enter');
enterElement.addEventListener("mouseenter", function(){
enterElement.style.color = "red";
});
Овај код ради једноставну ствар – када мишем пређете преко елемента помоћу класе „ентер“, боја текста овог елемента постаје црвена.
Удубљивање: објашњење кода корак по корак
Корак КСНУМКС: Прво, циљамо елемент који желимо моусеентер догађај на који се треба пријавити. Ово се постиже коришћењем куериСелецтор метод.
- нека ентерЕлемент = доцумент.куериСелецтор('.ентер');
Корак КСНУМКС: Затим примењујемо аддЕвентЛистенер начин причвршћивања моусеентер догађај нашем изабраном елементу, наводећи функционалност у функцији.
- ентерЕлемент.аддЕвентЛистенер(“моусеентер”, фунцтион(){…
Корак КСНУМКС: У оквиру моусеентер функцију, дефинишемо шта се дешава када показивач миша уђе у елемент. У овом случају, боја текста елемента ће се променити у црвену.
- ентерЕлемент.стиле.цолор = “црвено”;
Релевантне библиотеке и функције
Иако је догађај моусеентер у основи део ЈаваСцрипт-а, он је такође подржан у ЈаваСцрипт библиотекама, као што је јКуери. Концепт је исти; међутим, синтакса је мало другачија. Еквивалентни код у јКуери-у би изгледао овако:
$(".enter").mouseenter(function(){
$(this).css("color", "red");
});
Укратко, моусеентер догађај пружа изузетно користан начин да побољшате интерактивну природу ваших веб страница, једноставним подешавањем и имплементацијом. Начин на који користите овај догађај ограничен је само вашом креативношћу.
