Szintaxis
elem. az egérrel = funkció ( ) { myScript } ;
A fenti szintaxisban:
- elem: Meghatározza az adott HTML-elemet, például „
”, „
”, „
” stb.
- funkció(): Azt a meghatározott függvényt jelöli, amely az eseményindító hatására meg lesz hívva.
- myScript: Az „onmouseover” esemény bekövetkezésekor az adott feladat végrehajtására szolgáló függvénydefinícióra utal.
Szintaxis ('addEventListener()' metódussal)
elem. addEventListener ( 'egér rá' , myScript ) ;
A fenti szintaxisban a „ addEventListner() ' metódus hozzáfűzi a ' az egérrel ” esemény a JavaScript függvény végrehajtásához bizonyos feladatok végrehajtásához.
1. példa: Az „onmouseover” esemény alkalmazása a riasztási mezőre az alapvető szintaxis alapján
Ebben a forgatókönyvben egy „ az egérrel ' esemény társítható a ' ”, azaz egy bekezdés HTML-elem, amely megjeleníti a figyelmeztető mezőt a megadott üzenettel az eseményindítónál.
HTML kód
Először nézze meg a következő HTML-kódot:
< h2 igazítás = 'központ' > Figyelmeztetés megjelenítése Doboz Használata 'on mouseover' Esemény h2 >< p onmouseover = 'minta()' > Mutasson rá ez bekezdést, hogy felbukkanjon egy figyelmeztető mező. p >
A fenti kódban:
- Először adjon hozzá egy 2. szintű alcímet a „ ” címkét, és állítsa az igazítást „középre”.
- Ezután adjon meg egy bekezdést, amelyhez egy ' az egér felett ' esemény átirányítása a ' nevű függvényre minta() ', amely akkor aktiválódik, ha az egeret a bekezdésre viszi.
JavaScript kód
Most tekintse át az alábbi JavaScript-kódot:
< forgatókönyv >függvényminta ( ) {
éber ( 'onmouseover esemény aktiválva' ) ;
}
forgatókönyv >
A fenti kódrészletben a ' függvény minta() '' jelenik meg a ' éber ” mezőbe a megadott üzenettel, amikor az „onmouseover” esemény aktiválódik.
Kimenet
Ez a kimenet azt jelzi, hogy amikor az egeret a bekezdés fölé viszi, megjelenik a „figyelmeztetés” mező, amely megjeleníti a megadott üzenetet.
2. példa: Az „onmouseover” esemény alkalmazása a háttérszín megváltoztatásához az „addEventListener()” metódus szintaxisa alapján
Ez a példa az „onmouseover” eseményt alkalmazza az „addEventListener()” metódussal a „ bekezdés módosításához háttérszín ” az eseményindítóra.
HTML kód
A HTML kód alább látható:
< h2 igazítás = 'központ' > Háttér módosítása Szín Használata 'on mouseover' Esemény h2 >< p id = 'teszt' > Mutasson rá ez bekezdést a háttérszín megváltoztatásához. p >
A fenti kódsorokban:
- Hasonlóképpen a „ ” elem egy 2. szintű alcímet hoz létre, a következőhöz igazítva központ ”.
- Ezt követően a „ ” elem azt a bekezdést jelöli, amelynek azonosítója „teszt”.
JavaScript kód
Most folytassa a következő JavaScript kóddal:
< forgatókönyv >dokumentum. getElementById ( 'teszt' ) . addEventListener ( 'egér rá' , demó ) ;
funkció demo ( ) {
dokumentum. getElementById ( 'teszt' ) . stílus . háttér = 'rózsaszín' ;
}
forgatókönyv >
A fenti kódblokkban:
- A ' getElementById() ' módszert alkalmazzák a ' addEventListener() ” metódussal lekérheti a bekezdést a hozzá tartozó „teszt” azonosítóval, és az „egeret átlépő” eseményt a megadott függvényhez társítja argumentumként.
- Most határozza meg a függvényt myfunc() ”.
- A függvénydefinícióban a „ document.getElementById() ' módszer a ' stílus.háttér ” tulajdonság a bekezdés háttérszínének megváltoztatásához az eseményindítónál.
Kimenet
Mint látható, a „ háttérszín A bekezdés ”-je megváltozott a kiváltott esemény, azaz az „egeret mozgatása” miatt.
Következtetés
A JavaScript a beépített ' az egérrel ” esemény, amely kiváltja a kívánt műveletet, ha az egérmutatót a HTML elemre viszi. Meghívja a JavaScript függvényt, hogy végrehajtsa a megadott műveletet az eseményindítónál. Megvalósítható a „