Wydarzenia myszy JavaScript
Jak sugeruje nazwa zdarzeń myszy JavaScript są uruchamiane przez interakcję myszy z stronami internetowymi, a zdarzenia te są częścią obiektu Mouseevent.
Wydarzenia myszy JavaScript są
W tym spisie omawia te dogłębnie jeden po drugim.
wydarzenie OnClick
Gdy użytkownik kliknie element, zdarzenie OnClick odbywa się. To bąbelki i można go anulować. To wydarzenie obsługuje wszystkie tagi HTML inne niż , ,
, , ,
Składnia
Składnia zdarzenia onClick jest podana poniżej.
Składnia HTML
Składnia JavaScript
obiekt.onClick = function () script;Składnia JavaScript addEventListener ()
obiekt.addEventListener („kliknij”, skrypt);Przykład
Kliknij przycisk poniżej.
W powyższym przykładzie na stronie internetowej pojawi się przycisk. Po kliknięciu przycisku wydarzenie onClick nastąpi i pojawi się wiadomość.
Wyjście
Przed kliknięciem przycisku.
Po kliknięciu przycisku pojawi się wiadomość.
Wydarzenie onContextmenu
Gdy menu kontekstowe elementu jest otwarte za pomocą kliknięcia prawym przyciskiem myszy, zdarzenie OnContextMenu dzieje się. Bubbles i można również anulować. To wydarzenie obsługuje wszystkie tagi HTML i jest zawarte w DOM w wersji 3.
Składnia
Składnia zdarzenia onContextMenu podano poniżej.
Składnia HTML
Składnia JavaScript
obiekt.onContextMenu = function () script;Składnia JavaScript addEventListener ()
obiekt.addEventListener („contextMenu”, skrypt);Przykład
Kliknij mnie prawym przyciskiem myszy.
W powyższym przykładzie, po kliknięciu tekstu prawym przyciskiem myszy, zdarzenie OnContextMenu uruchomi się, a najpierw pojawi się pola dialoag, informując, że właśnie wykonałeś kliknięcie prawym przyciskiem prawym przyciskiem myszy.
Wyjście
Po uruchomieniu powyższego przykładu pojawi się następujący tekst.
Teraz, gdy klikniesz tekst prawym przyciskiem myszy, pojawi się okno dialogowe.
Po kliknięciu OK otwarte menu kontekstowe.
Wydarzenie ondblclick
Gdy element jest klikany dwukrotnie, zdarzenie ondblclick ma miejsce. To bąbelki i można go anulować. To wydarzenie obsługuje wszystkie tagi HTML inne niż , ,
, , ,
Składnia
Składnia zdarzenia ondblclick jest podana poniżej.
Składnia HTML
Składnia JavaScript
obiekt.ondblclick = function () script;Składnia JavaScript addEventListener ()
obiekt.addEventListener („dblClick”, skrypt);Przykład
W powyższym przykładzie pojawi się przycisk, a kiedy dwukrotnie klikniesz przycisk, zdarzenia OnDBLClick wyzwalają. Oto wyjście.
Wyjście
Przed dwukrotnym kliknięciem przycisku.
Po dwukrotnym kliknięciu przycisku.
wydarzenie OnMousedown
Po naciśnięciu przycisku myszy, trzymając myszę nad elementem HTML, zdarzenie OnMousedown zdarza się. To bąbelki i można go anulować. To wydarzenie obsługuje wszystkie tagi HTML inne niż , ,
, , ,
Składnia
Składnia wydarzenia OnMousedown jest następująca.
Składnia HTML
Składnia JavaScript
obiekt.onMousedown = function () script;Składnia JavaScript addEventListener ()
obiekt.addEventListener („Mousedown”, skrypt);Przykład
W powyższym przykładzie na stronie internetowej pojawi się przycisk. Kiedy klikniesz przycisk prawym przyciskiem myszy, utrzymując wskaźnik myszy na przycisku, wydarzenie OnMousedown uruchomi się, a tekst na przycisku zmieni kolor z czerwonego na czerwony.
Wyjście
Przycisk przed kliknięciem.
Po kliknięciu myszy prawym przyciskiem myszy, podczas gdy kursor pozostaje na przycisku.
wydarzenie onmouseenter
Kiedy przynosisz wskaźnik myszy na element HTML, zdarzenie onmouseenter zdarza się.Nie może bańczyć i nie można go anulować. To wydarzenie obsługuje wszystkie tagi HTML inne niż , ,
, , ,
Składnia
Składnia zdarzenia onmouseenter jest następująca.
Składnia HTML
Składnia JavaScript
obiekt.onMouseEnter = function () script;Składnia JavaScript addEventListener ()
obiekt.addEventListener („MOUSEETER”, skrypt);Przykład
W powyższym przykładzie tekst pojawia się na stronie internetowej. Kiedy przyniesiesz kursor myszy na tekst, zdarzenie onmouseEnter uruchomi się, a kolor zmieni się na czerwony.
Wyjście
Przed wprowadzeniem wskaźnika myszy do tekstu.
Po wprowadzeniu kursora myszy na tekst.
wydarzenie onmouseleave
Kiedy odsuwasz wskaźnik myszy od elementu, zdarzenie onmouseleave. Nie może bańczyć i nie można go anulować. To wydarzenie obsługuje wszystkie tagi HTML inne niż , ,
, , ,
Składnia
Składnia zdarzenia onmouseleave jest następująca.
Składnia HTML
Składnia JavaScript
obiekt.onMouseleave = function () script;Składnia JavaScript addEventListener ()
obiekt.addEventListener („Mouseleave”, skrypt);Przykład
W powyższym przykładzie tekst pojawia się na stronie internetowej. Po odejściu kursora myszy od tekstu, zdarzenie onmouseEnter uruchomi się, a kolor zmieni się na zielony.
Wyjście
Przed wyciągnięciem wskaźnika myszy od tekstu.
Kolor zmieni się, gdy wskaźnik myszy odejdzie.
Wydarzenie OnMousEmove
Kiedy poruszasz kursor myszy, zachowując go na elemencie, zdarzenie onMousEmove dzieje się. Jedyną różnicą między tym wydarzeniem a zdarzeniem onmouseEnter jest to, że bąbelki i można ją anulować. To wydarzenie obsługuje wszystkie tagi HTML inne niż , ,
, , ,
Składnia
Składnia onmousemove podano poniżej.
Składnia HTML
Składnia JavaScript
obiekt.onMousEmove = function () script;Składnia JavaScript addEventListener ()
obiekt.addEventListener („Mousemove”, skrypt);Przykład
W powyższym przykładzie, kiedy przesuniesz kursor myszy na tekst, wydarzenie onMousEmove wydarzy.
Wyjście
Przed przesunięciem myszy na tekst.
Po.
wydarzenie onmouseout
Kiedy kursor myszy opuszcza element lub którekolwiek z jego dzieci, zdarzenie onmouseout zdarza się. Jedyną różnicą między tym a onmouseleavelem jest to, że bąbelki i można ją anulować. To wydarzenie obsługuje wszystkie tagi HTML inne niż , ,
, , ,
Składnia
Składnia zdarzenia onmouseout podano poniżej.
Składnia HTML
Składnia JavaScript
obiekt.onMouseout = function () script;Składnia JavaScript addEventListener ()
obiekt.addEventListener („MOUSEOut”, scenariusz);Przykład
W powyższym przykładzie przesuwasz kursor myszy od przycisku, zdarzenie onmouseout uruchomi się, a kolor tekstu na przycisku zmieni się na zielony.
Wyjście
Zanim
Po
Wydarzenie onmouseover
Kiedy przynosisz kursor myszy na element lub którykolwiek z jego dzieci, zdarzenie onmouseover dzieje się. To bąbelki i można go anulować. To wydarzenie obsługuje wszystkie tagi HTML inne niż , ,
, , ,
Składnia
Składnia zdarzenia onmouseover jest podana poniżej.
Składnia HTML
Składnia JavaScript
obiekt.onMouseover = function () script;Składnia JavaScript addEventListener ()
obiekt.addEventListener („MOUSEOVER”, skrypt);Przykład
W powyższym przykładzie przesuwasz kursor myszy na przycisku, zdarzenie onmouseover uruchomi się, a kolor tekstu na przycisku zmieni się na czerwony.
Wyjście
Zanim
Po
Wydarzenie onmouseup
Gdy przycisk myszy jest zwolniony, jednocześnie utrzymując wskaźnik na elemencie, zdarzenie onmouseup zdarzenia. To bąbelki i można go anulować. To wydarzenie obsługuje wszystkie tagi HTML inne niż , ,
, , ,
Składnia
Składnia zdarzenia onmouseup jest podana poniżej.
Składnia HTML
Składnia JavaScript
obiekt.onMouseUp = function () script;Przykład
W powyższym przykładzie pojawi się przycisk. Po kliknięciu przycisku prawym przyciskiem myszy i zwolnieniu, utrzymując wskaźnik myszy na przycisku, zdarzenie Onmouse Up uruchomi się, a kolor tekstu na przycisku zmieni się na zielony.
Wyjście
Przed kliknięciem przycisku przycisku.
Po zwolnieniu przycisku, zachowaj na nim wskaźnik myszy.
Wniosek
Zdarzenia, które występują z powodu ruchów myszy, są określane jako zdarzenia myszy JavaScript. Wydarzenia, które są sklasyfikowane w kategorii wydarzeń JavaScript Myse, to wydarzenie Onclick, Oncontextmenu Event, Ondblclick Event, OnMousedown Event, OnmouseEnter Event, wydarzenie OnMouseMove, wydarzenie Onmouseout, wydarzenie Onmouseover i Onmouseup Event. Wszystkie te wydarzenia są szczegółowo omówione wraz z odpowiednim przykładem.
O autorze
Jestem specjalistą ds. Inżynierii oprogramowania, która bardzo interesuje się pisaniem. Kontynuuję pisanie techniczne jako karierę w pełnym wymiarze godzin i dzielę się swoją wiedzą za pomocą moich słów.
Zobacz wszystkie postyLinux Hint LLC, edytor@Linuxhint.com
1309 S Mary Ave Suite 210, Sunnyvale, CA 94087
Polityka prywatności i warunki użytkowania