The Missing Manual: Chapter 6, Action/Reaction: Making Pages Come Alive with Events - side 201 - 212
En event udløses af en brugerbestemt handling i browseren. Klikker brugeren fx på en musetast eller trykker på en tast udløses en event. Når disse events finder sted, kan man via JavaScript bede om at få udført forskellige handlinger. Det sker ved at indsætte en såkaldt eventhandler. Eventhandlere bliver knyttet til et objekt i DOM, så eventhandleren aktiveres i det øjeblik den handling, som eventhandleren er beregnet til at spore, finder sted i relation til objektet.
Det er eventhandlerne der er interessante her, for uden dem ville de indtrufne events ikke blive opfanget, og de ville dermed ikke udløse noget som helst. Er der derimod en eventhandler knyttet til objektet, kan eventhandleren sættes til at udføre en stump JavaScript kode eller et kald til en JavaScript funktion, i det øjeblik eventen finder sted.
En eventhandler er således knyttet til et objekt i DOM. Eventhandlere er lette at genkende, fordi de altid er forsynet med prefikset on.
<button onclick="alert('Boo!');">Click me</button>
<a href="#" onclick="alert('Boo!');">Click me</a>
Herunder ser du en liste med de mest almindelige events i JavaScript og de tilsvarende eventhandlere. Du får samtidig en angivelse af, hvornår de udløses, og hvilke elementer de er knyttet til. Du skal dog være opmærksom på, at i nyere browsere kan de viste events anvendes sammen med en del flere objekter end dem, der er nævnt her.
| Event | Genereres af | Handlingen udløses når | Event handlerens navn |
| abort | image | Brugeren afbryder indlæsningen af et billede | onabort |
| blur | window og form elementer | Et formelement, en frame eller et vindue mister fokus | onblur |
| change | text field, text area og select liste | Værdien ændres og elementet mister fokus | onchange |
| click | checkbox, radio knap, submit knap, reset knap, knap (button) og link | Der klikkes på formelementet eller linket | onclick |
| dragdrop | window | Et objekt, fx en fil trækkes ind over og slippes i et vindue | ondragdrop |
| error | image og window | Der opstår en fejl under indlæsning af et billede eller et dokument | onerror |
| focus | window og form elementer | Et formelement, en frame eller et vindue får fokus | onfocus |
| keydown | document, image, link og textarea | En tast trykkes ned på tastaturet | onkeydown |
| keypress | document, image, link og textarea | En tast trykkes ned og holdes nede | onkeypress |
| keyup | document, image, link og textarea | En tast frigives | onkeyup |
| load | document | En webside læses ind i browseren | onload |
| mousedown | document, button, link | En museknap trykkes ned | onmousedown |
| mousemove | ingen objekter | Markøren bevæger sig | onmousemove |
| mouseout | link, image | Markøren forlader et område eller et link | onmouseout |
| mouseover | link, image | Markøren bevæger sig ind over et område eller et objekt | onmouseover |
| mouseup | document, button, link | En museknap frigives | onmouseup |
| move | window | Et vindue flyttes | onmove |
| reset | reset knappen i en form | Der trykkes på reset knappen i en form | onreset |
| resize | window | Et vindue ændre størrelse | onresize |
| select | text felt, text area og selectliste | Et element vælges | onselect |
| submit | submit knappen i en form | Der trykkes på submit knappen i en form | onsubmit |
| unload | document | En webpage forlades | onunload |
Browser events demo (Fra grundbogen)
| Event | Anvendelse |
|---|---|
| onblur | Lukke popup vinduer når de mister fokus |
| onchange | Løbende formvalidering af enkeltelementer |
| onclick | Udløser handlinger i forbindelse med tryk på knap, etlink eller et tekstfelt. |
| onload | Et script som udføres, når en side loades, fx billeder der skifter |
| onmouseover | Rollover effekt |
| onmouseout | Rollover effekt |
| onresize | Replacering af elementerne i et vindue, hvis de er placeret i forhold til vinduets størrelse. |
| onsubmit | Kald af en valideringsrutine når der trykkes på submit en form |
Nogle eksempler fra W3Schools:
Which mouse button was clicked?
What are the coordinates of the cursor?
What is the keycode of the key pressed?
What are the coordinates of the cursor, relative to the screen?
What are the coordinates of the cursor?
Was the shift key pressed?
Which element was clicked?
Which event type occurred?
Using Events with Functions
1. Inline Events onclick="alert('welcome'); Eksempler: Lommeregner, hotelplaner , Random generator
2. The Traditional Model
function message(){ alert(”Welcome”); }
window.onload = message; // no parentheses after message!
3. The jQuery
A link that calls a alert box.
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
JQuery (www.jquery.com)
$(‘#message’).html('This is some new text'); // targeting the css selector for id="message"
var a = $("#tekstfelt").value; // i stedetfor document.getElementById("tekstfelt").value;
jQuiry selectors looks like CSS selectors
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
#blueBox {
position:absolute;
left:338px;
top:125px;
width:225px;
height:220px;
z-index:1;
background-color: #0099FF;
}
#header {color:#0033FF ;}
.paragraf {background-color:#00CC33; border:dotted }
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function aabenBox(){
$("#blueBox").fadeIn();
}
function gemBox(){
$("#blueBox").hide();
}
function newHeadText(){
$("#header").html("Hello World ");
}
</script>
<title>A web page</title>
</head>
<body>
<div id="blueBox">BLUE BOX</div>
<h1 id="header"> A Headline </h1>
<p class="paragraf"> Intro to use of Jquery </p>
<form>
<input type="button" onclick="newHeadText(); " value="New text in header" />
<input type="button" onclick="aabenBox(); " value="Show" />
<input type="button" onclick="gemBox();; " value="Hide" />
</form>
</body>
</html>
Examples of more jQuiry functions
1. Repetitionsøvelser øvelser (pdf dokument) og som Worddokument
2. Tilføj den manglende JavaScript code sådan at lommeregneren på nedenstående link kommer til at virke.
http://www.slipsager.net/scripting2sem/js_calculator_ex.html
Gem lommeregneren som js_calculator.html
3. Make the form validation script work for the ordering form at:
http://www.slipsager.net/scripting2sem/form_validation_ex.html
Save it as form_validation.html
4. Events og style
Placer et DIV-element på en XHTML side. Giv det en baggrundsfarve og en fast højde og bredde. Placer dernæst 2 knapper på siden. Den ene skal vises DIV-elementet, når den aktiveres, og den anden skal skjule det. Du kan skjule et element, "mitElement", med denne syntaks: document.getElementById("mitElement").style.visibility = "visible"; og skjule det med denne: document.getElementById("mitElement").style.visibility = "hidden";
Se evt. på følgende eksempel
5. Lave tutorial s.29-32 i bogen, hvor du tilføjer jquery.js til øvelsesfilen (Tutorial: Highlighting Table Rows )
Central elements:
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function( ) { $('table.striped tr:even').addClass('even'); });
</script>
Ex 5. Hvornår og hvorfor kan det være godt at bruge JQuery biblioteket i et webprojekt?
Ex 6. Use the Getting started tutorial to make a webpage with a link that opens an alert box with JQuery .
Ex7.Tutorial page 212: Highlighting Table Rows ../
missingmanual_tutorials/MM_JAVASCRIPT/chapter06/6.1.html
Ex8.Tutorial page 227: A One-Page FAQ
missingmanual_tutorials/MM_JAVASCRIPT/chapter06/6.2.html
Hand's on dag 2