JavaScript mushendelser
Som antydet av navnet JavaScript Mouse -hendelser utløses av musens interaksjon med websidene, og disse hendelsene er en del av MouseEvent -objektet.
JavaScript mushendelser er
Denne oppskrivningen diskuterer disse en-til-en i dybden.
OnClick -arrangement
Når en bruker klikker på et element, skjer OnClick -hendelsen. Den bobler og kan avlyses. Denne hendelsen støtter alle andre HTML -tagger enn , ,
, , ,
Syntaks
Syntaksen til OnClick -hendelsen er gitt nedenfor.
HTML -syntaks
JavaScript -syntaks
gjenstand.onClick = funksjon () script;JavaScript AddEventListener () Syntaks
gjenstand.AddEventListener ("klikk", skript);Eksempel
Klikk på knappen nedenfor.
I eksemplet ovenfor vil en knapp vises på websiden. Etter å ha klikket på knappen vil OnClick -hendelsen skje, og en melding vises.
Produksjon
Før knappen er klikket.
Etter at knappen er klikket, vises meldingen.
OnContextMenu -arrangement
Når hurtigmenyen til et element åpnes ved hjelp av høyreklikk, skjer OnContextMenu-hendelsen. Den bobler og kan også kanselleres. Denne hendelsen støtter alle HTML -tagger og er inkludert i DOM versjon 3.
Syntaks
Syntaksen til OnContextMenu -hendelsen er gitt nedenfor.
HTML -syntaks
JavaScript -syntaks
gjenstand.onContextMenu = funksjon () script;JavaScript AddEventListener () Syntaks
gjenstand.AddEventListener ("ContextMenu", skript);Eksempel
Høyreklikk på meg.
I eksemplet ovenfor, når du høyreklikker på teksten, vil OnContextMenu -hendelsen utløse, og først vil en dialoagboks vises og forteller at du nettopp har utført et høyreklikk, og etter at du klikker på OK i dialogboksen, åpnes hurtigmenyen å åpne.
Produksjon
Når du kjører ovennevnte eksempel, vises følgende tekst.
Nå når du vil høyreklikke på teksten, vises dialogboksen.
Etter å ha klikket OK, åpnes hurtigmenyen.
OndBlclick -arrangementet
Når et element er dobbeltklikket, skjer OndBlclick-hendelsen. Den bobler og kan avlyses. Denne hendelsen støtter alle andre HTML -tagger enn , ,
, , ,
Syntaks
Syntaksen til OndBlClick -hendelsen er gitt nedenfor.
HTML -syntaks
JavaScript -syntaks
gjenstand.OndBlClick = funksjon () script;JavaScript AddEventListener () Syntaks
gjenstand.AddEventListener ("dblclick", manus);Eksempel
I eksemplet ovenfor vil en knapp vises, og når du vil dobbeltklikke på knappen, utløser Ondblclick -hendelsen og en melding vises. Her er utgangen.
Produksjon
Før dobbeltklikking av knappen.
Etter dobbeltklikking av knappen.
Onmousedown -arrangementet
Når du trykker på en museknapp mens du holder musen over et HTML -element, skjer Onmousedown -hendelsen. Den bobler og kan avlyses. Denne hendelsen støtter alle andre HTML -tagger enn , ,
, , ,
Syntaks
Syntaksen til Onmousedown -hendelsen er som følger.
HTML -syntaks
JavaScript -syntaks
gjenstand.onMousedown = funksjon () script;JavaScript AddEventListener () Syntaks
gjenstand.AddEventListener ("Mousedown", manus);Eksempel
I eksemplet ovenfor vil en knapp vises på websiden. Når du vil høyreklikke på knappen mens du holder musepekeren på knappen, vil Onmousedown -hendelsen utløse, og teksten på knappen vil endre fargen fra svart til rød.
Produksjon
Knappen før du klikker.
Etter å ha høyreklikk på musen mens markøren holder seg på knappen.
OnmouseEnter -arrangement
Når du tar med en musepeker på et HTML -element, skjer onmouseenter -hendelsen.Den kan ikke boble og kan verken kanselleres. Denne hendelsen støtter alle andre HTML -tagger enn , ,
, , ,
Syntaks
Syntaksen til onmouseenter -hendelsen er som følger.
HTML -syntaks
JavaScript -syntaks
gjenstand.onmouseEner = funksjon () script;JavaScript AddEventListener () Syntaks
gjenstand.AddEventListener ("Mouseenter", manus);Eksempel
I eksemplet ovenfor vises en tekst på websiden. Når du tar med musemarkøren over teksten, vil OnmouseEnter -hendelsen utløse og fargen vil endre seg til rød.
Produksjon
Før du tar med musepekeren på teksten.
Etter å ha brakt musemarkøren over teksten.
Onmouseleave -arrangementet
Når du flytter musepekeren din bort fra et element, skjer OnMouseleave -hendelsen. Den kan ikke boble og kan verken kanselleres. Denne hendelsen støtter alle andre HTML -tagger enn , ,
, , ,
Syntaks
Syntaksen til Onmouseleave -hendelsen er som følger.
HTML -syntaks
JavaScript -syntaks
gjenstand.onMouseleave = funksjon () script;JavaScript AddEventListener () Syntaks
gjenstand.AddEventListener ("Mouseleave", manus);Eksempel
I eksemplet ovenfor vises en tekst på websiden. Når du flytter musemarkøren bort fra teksten, vil onmouseenter -hendelsen utløse og fargen vil endre seg til grønn.
Produksjon
Før du bringer musepekeren bort fra teksten.
Fargen vil endre seg når musepekeren beveger seg bort.
Onmousemove -arrangementet
Når du flytter musemarkøren mens du holder den på et element, skjer OnMousemove -hendelsen. Den eneste forskjellen mellom denne hendelsen og OnmouseEnter -hendelsen er at den bobler og kan avlyses. Denne hendelsen støtter alle andre HTML -tagger enn , ,
, , ,
Syntaks
Syntaksen til OnMousemove er gitt nedenfor.
HTML -syntaks
JavaScript -syntaks
gjenstand.onMousemove = funksjon () script;JavaScript AddEventListener () Syntaks
gjenstand.AddEventListener ("Mousemove", manus);Eksempel
I eksemplet ovenfor, når du flytter musemarkøren over teksten, vil OnMousemove -hendelsen skje og en dialogboks vil vises med å informere deg om at OnMousemove -hendelsen er utløst.
Produksjon
Før du flytter musen over teksten.
Etter.
Onmouseout -arrangementet
Når en musemarkør etterlater et element eller noen av dets barn, skjer onmouseout -hendelsen. Den eneste forskjellen mellom dette og onmouseleave er at den bobler og kan avlyses. Denne hendelsen støtter alle andre HTML -tagger enn , ,
, , ,
Syntaks
Syntaksen til onmouseout -hendelsen er gitt nedenfor.
HTML -syntaks
JavaScript -syntaks
gjenstand.onmouseout = funksjon () script;JavaScript AddEventListener () Syntaks
gjenstand.AddEventListener ("Mouseout", manus);Eksempel
I eksemplet ovenfor flytter du musemarkøren bort fra knappen, Onmouseout -hendelsen vil utløse og fargen på teksten på knappen vil endre seg til grønn.
Produksjon
Før
Etter
Onmouseover -arrangementet
Når du tar med musemarkøren på et element eller noen av dets barn, skjer onmouseover -hendelsen. Den bobler og kan avlyses. Denne hendelsen støtter alle andre HTML -tagger enn , ,
, , ,
Syntaks
Syntaksen til onmouseover -hendelsen er gitt nedenfor.
HTML -syntaks
JavaScript -syntaks
gjenstand.onmouseOver = funksjon () script;JavaScript AddEventListener () Syntaks
gjenstand.AddEventListener ("Mouseover", manus);Eksempel
I eksemplet ovenfor flytter du musemarkøren på knappen, OnmouseOver -hendelsen vil utløse og fargen på teksten på knappen vil endre seg til rød.
Produksjon
Før
Etter
Onmouseup -arrangementet
Når en museknapp slippes mens du holder pekeren på et element, skjer Onmouseup -hendelsen. Den bobler og kan avlyses. Denne hendelsen støtter alle andre HTML -tagger enn , ,
, , ,
Syntaks
Syntaksen til Onmouseup -hendelsen er gitt nedenfor.
HTML -syntaks
JavaScript -syntaks
gjenstand.onmouseup = funksjon () script;Eksempel
I eksemplet ovenfor vil en knapp vises. Når du høyreklikker på knappen og slipper mens du holder musepekeren på knappen, vil Onmouse Up -hendelsen utløse, og fargen på teksten på knappen vil endre seg til grønn.
Produksjon
Før høyreklikk på knappen.
Etter å ha sluppet knappen mens du holder musepekeren på den.
Konklusjon
Hendelser som oppstår på grunn av musebevegelser blir referert til som JavaScript -mushendelser. Hendelser som er klassifisert i kategorien JavaScript Mouse Event. Alle disse hendelsene blir diskutert i detalj sammen med passende eksempel.
Om forfatteren
Jeg er programvareteknikk profesjonell med en dyp interesse for å skrive. Jeg forfølger teknisk skriving som min karriere på heltid og deler kunnskapen min gjennom mine ord.
Se alle innleggLinux Hint LLC, redaktør@linuxhint.com
1309 S Mary Ave Suite 210, Sunnyvale, CA 94087
Personvernregler og bruksvilkår