Hvordan bruke onmouseover og onmouseout

November 29

Javascript hendelsesbehandlinger forårsake Javascript-kode for å utføre som svar på ulike hendelser som skjer på websiden. Den "onmouseover" og "onmouseout" hendelser er utløst av brukerens mus aktivitet: når markøren passerer over et objekt på siden med en "onmouseover" hendelseshåndterer knyttet til det, hendelsen utløses. Når markøren går ut av et objekt med en "onmouseout" hendelseshåndterer knyttet til det, er at hendelsen utløses. Fest disse hendelsesbehandlinger til objekter på siden din med HTML-attributter eller med Javascript-kommandoer.

Bruksanvisning

1 Plasser Javascript-funksjoner mellom "hodet" kodene i HTML-dokumentet som inneholder koden du ønsker å bli henrettet når "onmouseover" og "onmouseout" hendelser inntreffer. Bruk denne malen for å komme i gang:

funksjon overhandler () {

alert("MouseOver event for: " + this.id);

}

funksjon outhandler () {

alert("MouseOut event for: " + this.id);

}

</ Script>

Disse funksjonene vil bare vise varsler dialoger når de respektive hendelsene er utløst. Plassere noen Javascript-kode du liker i disse funksjonene. Legg merke til bruken av "denne" søkeord; "Dette" i denne sammenheng vil referere til objektet som hendelseshåndterer ble utløst hvis du legger hendelsesbehandling med Javascript uttalelser.

2 Legg til "onmouseover" og "onmouseout" hendelseshåndterere som attributter av HTML-koder i kroppen av dokumentet for å feste dem til objekter. Her er et eksempel:

Den "dette" søkeord vil ikke være tilgjengelig i hendelseshåndterer fungerer når du fester dem på denne måten, så hvis du trenger å bruke "dette" refererer til metoden i trinn 3 eller eksplisitt passere i objektreferanse som dette:

onmouseover = "overhandler (denne);"

Hvis du passerer referansen på denne måten, får objektet referansen i funksjon ved å erklære den i "hodet" tags på denne måten:

funksjon overhandler (obj) {

Deretter bruker "obj" der du ville ha brukt "dette."

3 Legg til følgende kode i bunnen av "kroppen" delen av HTML-dokumentet for å tildele hendelseshåndterere bruker Javascript uttalelser:

. Document.getElementById ( "image1") onmouseover = overhandler;

document.getElementById ( "image1") onmouseout = outhandler.;

</ Script>

Dette eksemplet bruker "id" attributt for å spesifisere hvilket objekt å feste hendelsesbehandlinger til. Fest handlers til mange objekter av samme type samtidig ved hjelp av en rutine som dette:

Vis bilder = document.getElementsByTagName ( "img");

for (i i Vis bilder) {

imgs[i].onmouseover = overhandler;

Vis bilder [i] .onmouseout = outhandler;

}

</ Script>

I begge disse eksemplene er av "denne" søkeord gjøres tilgjengelig for den funksjon når hendelsen oppstår. Sørg for å plassere disse "script" tags på bunnen av "kroppen" delen, slik at koden kjøres etter at HTML-elementer har blitt lastet.

Hint

Den "onmouseover" og "onmouseout" hendelseshåndterere støttes av følgende HTML objekter: <a>, <adresse>, <område>, <b>, <BDO>, <big> <blockquote>, <body>, <-knappen>, <caption>, <cite>, <code>, <dd>, <DFN>, <div>, <dl> <dt>, <em>, <fieldset>, <form>, <h1 > til <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend> <li>, <map>, <ol> <p>, <pre>, <samp>, <select>, <small> <span>, <strong>, <sub>, <sup>, <table>, <tbody> <td>, <textarea>, <TFOOT >, <th>, <thead>, <tr> <tt>, <ul> og <var>.