JavaScript gjør et nettsted for å svare på brukerens hendelser , endre innholdet på en side basert på ulike mus og tastetrykk handlinger. Menyer og knapper ofte fungere som triggere for disse endringene , men DIVs kan være like responsive. En DIV er en HTML-kode som fungerer som en beholder for annet innhold , som for eksempel tekst og bilder . Å bevege musen over noen del av DIV kan utløse en endring. Flytte musen utenfor DIV kan utløse en annen. Instruksjoner
en

Sett en hjelper funksjon mellom hodet kodene som lar skriptet arbeid på tvers av alle nettlesere . Funksjonen vil legge hendelsen lyttere til HTML-elementer på siden. Når det kalles, tar hjelperen funksjonen tre argumenter, eller sett av instruksjon : . Målet element , type arrangement og funksjon for å ringe

funksjon addEvent ( obj , type, fn ) {
< p > if ( obj.attachEvent ) {

obj [' e' + typen + fn ] = fn ;

obj [type + fn ] = function ( ) { obj [' e' + typen + fn ] ( window.event ) ;}

obj.attachEvent ( "på" + type, obj [type + fn ] );

} else

obj . addEventListener (type, fn , false);

}
2

Lag en funksjon mellom hodet kodene som bruker lasten hendelse, eller siden lastes i vinduet, for å ringe den " testMouse "-funksjonen . Dette vil legge to hendelsen lyttere til DIV din : en

window.onload = testMouse ;
3

Lag funksjoner som vil resultere i fargen på DIV din endring på siden basert på mouseover og mouseout hendelser . Start med å lage " testMouse ", som vil få DIV ved sin ID av " testDiv . " Lytt til mouseover eller mouseout hendelser og kaller de " addColor " eller " removeColor " funksjoner , henholdsvis. Skape " addColor " og " removeColor "-funksjoner som endrer bakgrunnsfargen

funksjon testMouse ( ) {

Var divField = document.getElementById ( " testDiv "); .
< P > addEvent ( divField , ' mouseover ' , addColor ) ;

addEvent ( divField , ' mouseout ' , removeColor );

}

funksjon addColor ( ) {

Div. removeColor ( ) {

Var divField = document.getElementById ( " testDiv ");

divField.style.backgroundColor = " ";

}
4

Plasser DIV-koder og sample tekst mellom body-kodene i dokumentet : en