Homepage » Tutorials » Javascript » Event handlers

Event handlers

Info
Door:	Mirax	Moeilijkheidsgraad:
Geplaatst op:	10-02-2004	Reacties:	12(Bekijken)
Views:	17141 (gem. 7.1302 per week)	Log in om zelf te reageren
		Waardering:	8.6/10 (7 stemmen)

Event handlers zijn acties die worden ondernomen als de gebruiker iets doet op jouw site, bijvoorbeeld ergens op klikken of ergens met zijn muis overheen zweven.

Nadat de bezoeker aan die gebeurtenis, hier klikken of zweven, voldaan heeft, kan er met behulp van JavaScript een functie, hier het openen van een waarschuwingsvenster, aan worden verbonden. Het stukje script van het venstertje dat te voorschijnt komt als je op een link klikt, ziet er als volgt uit:

Dit is ook gelijk een voorbeeld van een stuk javascript-code geïntegreerd in een html-attribuut. In dit geval is onClick de event handler en de alert de daaraan verbonden functie (kom ik later op terug).

Hieronder staat van elke event handler de betekenis en in welke html-elementen je ze kan gebruiken:

Event handler:	Betekenis:	Elementen:
onAbort	Bij het afbreken van het laden	image
onBlur	Tegenovergestelde van onFocus	select, text, textarea, window
onChange	De inhoud wordt veranderd	select, text, textarea
onClick	Er wordt ergens op geklikt	formulieren, link
onDblClick	Er wordt ergens op dubbelgeklikt	formulieren, link
onDragDrop	Een element in de browser wordt verplaatst	window
onError	Een fout bij het laden	image, window
onFocus	Een window of deel van formulier wordt geactiveerd	select, text, textarea, window
onKeyDown	Een toets wordt ingedrukt	document, image, link, text(area)
onKeyPress	Een toets wordt langer ingedrukt	idem
onKeyUp	Een toets wordt losgelaten	idem
onLoad	Een frame of window is geladen	document, frame, window
onMouseDown	Er wordt met de muis geklikt	button, document, link
onMouseMove	De muis wordt bewogen	window
onMouseOut	De muis wordt van een element afgehaald	area, link
onMouseOver	De muis wordt op een element geplaatst	area, link
onMouseUp	De muistoets wordt losgelaten	button, document, link
onMove	Window of frame wordt verplaatst	frame, window
onReset	Een formulier wordt gereset	form
onResize	De grootte van het venster wordt aangepast	frame, window
onSelect	Een deel van de tekst(area) wordt geselecteerd	text, textarea
onSubmit	Een formulier wordt verzonden	form
onUnload	Tegengestelde onLoad	document, frame, window

Hieronder volgen een paar voorbeelden om het bovenstaande te verduidelijken

Code: <form><input type="text" onKeyUp="this.value=this.value.toUpperCase()">

Resultaat:

Code: <form><input type="text"onFocus='this.value="Hoi"'></form>

Resultaat:

Code: <form><textarea onSelect="this.value='Geselecteerd!'">Selecteer deze tekst</textarea></form>
Resultaat:

«Hiërarchie Functies »

12 reacties
Help ik kan er niets van!	Geplaatst op 13-07-2009 om 18:31
Regular	Heel handig, als je weet hoe je het moet toepassen naar je eigen zien, iets wat ik nog niet helemaal doorheb. Momenteel werken enkel de voorbeeldscripts, als ik iets verander loopt het mis
Help ik kan er niets van!	Geplaatst op 11-07-2009 om 18:18
Regular	<a href="#"onClick="alert('Voorbeeld van een event handler n Klikken')">Klik!</a> wat zou er moeten gebeuren want bij mij gebeurt er nix en wat betekent die "alert"
juliusjk	Geplaatst op 21-12-2008 om 13:58
Regular	ooh...
Mirax	Geplaatst op 21-12-2008 om 13:58
Moderator	Met text bedoeling ik een text input in een formulier. Niet losse tekst op een pagina.
juliusjk	Geplaatst op 19-12-2008 om 12:31
Regular	In de tutorial staat dat je onSelect op text en textarea kunt gebruiken. ik heb dus geprobeert het op text te geruiken, maar dat werkt niet... ik heb het zo geprobeert: <html> <head> <title>Hoi iedereen!!!</title> </head> <body bgcolor="#FF9000"> <b><font face="chiller" color="#000FFF"><h1><center>En nu iets over mijzelf:</center></h1> <h2><br/><br/>Ik ben julius. Ik ben nog niet zo lang bezig met website maken, dus verwacht geen super leuke site. Toch hoop ik dat je het een beetje leuk vind...</h2></b></font> <font onSelect="this.value='Geselecteerd!'">Selecteer deze text</font> </body> </html> heeft iemand enig iedee hoe het wel moet???
Martino	Geplaatst op 26-11-2008 om 08:38
Regular	Is er ook een eventhandler die geactiveerd wordt bij het scrollen in een pagina? En dan zou het helemaal mooi zijn als het werkt bij het scrollen via mijn scrollwiel EN het scrollen via de scroll balk.
niemand	Geplaatst op 18-10-2008 om 09:27
Regular	Welke webbrowser gebruik jij? Staat je javascript wel aan? Want volgens mij als je active-X besturingselementen toelaat bij het openen moet dit werken: <html> <head> <title>Hi�rarchie</title> </head> <body> <a href="#"onClick=" window.alert('Voorbeeld van een event handler n Klikken')">Klik!</a> </body> </html> ( ahja hij delete de schuine backslash in dit bericht dus die mag je niet vergeten!!! )
Robin18	Geplaatst op 30-09-2008 om 10:06
Regular	Bij mij gebeurd er nix als ik dat bovenste voorbeeldje inplak in mijn kladblok.. Mijn code is: <html> <head> <title>Hi�rarchie</title> </head> <body> <a href="#"onClick="alert('Voorbeeld van een event handler n Klikken')">Klik!</a> </body> </html> Ben ik wat vergeten?xD ( ben nogal slecht hierin 0=D)
Onbekend lid	Geplaatst op 11-06-2007 om 18:21
Spammer	Bedankt dit heldert al veel op ...
korstiweg	Geplaatst op 04-09-2006 om 21:11
Regular	lol allemaal :P
Mirax	Geplaatst op 11-12-2005 om 19:31
Moderator	Ja, natuurlijk kan dat. Dan moet je met this.style.borderColor='...' werken.
Winand	Geplaatst op 06-12-2005 om 20:16
Regular	Mooi overzichtje, maar kan je ook (zie de site van macromedia) dat als je het boxje gebruikt dat de rand dan groen word?

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...

Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be