Obsługa zdarzeń - przegląd

workshop: #js16-ws1-events.html

Mini-warsztat JS: obsługa zdarzeń

Obsługa tablic, poznanie struktury obiektów oraz ich właściwości

Przygotowanie

Otwórz narzędzia deweloperskie przegladarki, następnie przejdź na zakładkę Konsola (console)
Wykonuj tam kod i polecenia z poniższych przykładów
Przetestuj każdy przykład od 1.1 do 1.5 wywołując jego funkcjonalności i obserwując zachowanie. Popraw/uzupełnij przykład, jeżeli posiada błędy/braki
Zmodyfikuj skrypt z listingu 1.4 w taki sposób, aby mozna było zliczyć ile razy użytkownik próbował wydrukować dokument, a ile razy faktycznie go wydrukował, oraz ile razy w ciągu sesji użytkownika zanikało połączenie sieciowe
Utwórz nowy dokument HTML, w którym umieść skrypt z listingu 1.5 oraz sprawdź działanie

1.1Event Handler vs. Event Listener

function message1(){
  alert('Przechodząc do następnego okna zgadzasz się otrzymać ocenę 1');
}
function message2(){
  alert('Za poprawną odpowiedź, dostajesz ocenę 5');
}
function message3(){
  alert('Wielki brat patrzy...');
}
function message4(){
  alert('Mniejszy brat podsłuchuje...');
}
document.onclick = message1;
document.onclick = message2;
document.addEventListener('click', message3 );
document.addEventListener('click', message4 );

1.2Korzystanie z infromacji od zdarzenia (Event)

// pomanipuluj trochę oknem i poruszaj wskaźnikiem:
// - przenieść na lewą, potem prawą, część ekranu,
// - przewiń zawartośc okna przegladarki pionowo i poziomo,
// - umieść okno na środku ekranu bez maksymalizacji.
function gdzieJestMysz(e){
  console.log("Pozycja XY klienta okna ekranu");
  console.log("Pozycja X: "+e.clientX+" "+e.pageX+" "+e.screenX);
  console.log("Pozycja Y: "+e.clientY+" "+e.pageY+" "+e.screenY);
}
document.body.addEventListener('mousemove',gdzieJestMysz);
function evInfo(e){
  console.log("Event type: "+e.type);
  e.preventDefault();
}
document.removeEventListener('mousemove', gdzieJestMysz);
document.body.addEventListener('mousemove',evInfo);
document.body.addEventListener('click',evInfo);
document.body.addEventListener('wheel',evInfo);
document.body.addEventListener('contextmenu',evInfo);

1.3Klawiatura i klawisze

// przetestuj z serią klawiszy: Q W E R T Y; a s d f; lewy ALT; prawy SHIFT, SPACJA, ENTER, F4, Fn
function readKey(e){
		e = e || window.event; // tryb kompatybilności z IE
		var key = ('charCode' in e) ? e.which : e.keyCode;
		console.log( e.type );
		console.log( e.code );	// etykieta klawisza
		console.log( key );		// kod znaku
}
document.addEventListener( 'keydown', readKey );
//document.addEventListener( 'keypress', readKey );
//document.addEventListener( 'keyup', readKey );

1.4Sprawdzanie stanu działań na urzadzeniach. Wiedzieć więcej - reagować lepiej

// dokonaj testu - próby wydruku
function saveTheWorld(){
	alert('Oszczędzaj papier i planetę - drukuj wirtualnie - do PDF');
}
document.addEventListener('beforeprint',saveTheWorld);	// co należy tutaj poprawić, by metoda zadziałała?

function networkStatus(e){
	console.log(e);
	if( e.type=='offline' )
		alert('Utracono połączenie z siecią');
	else
		alert('Ponownie nawiązano połączenie z siecią');
}
// dokonaj testu (ok 2 razy) poprzez odłączenie sieci i jej ponowne podłączenie
window.addEventListener('offline', networkStatus); 
window.addEventListener('online', networkStatus);

1.5OnLoad vs. ContentOnLoad. Zapisz jako: DOMload-KLASA-NAZWISKO.js

// zapisz poniższy kod w znaczniku <SCRIPT> umieszczonym w znaczniku <BODY>
window.addEventListener('load', function(e){
    console.log ('load');
});

document.addEventListener('readystatechange', function(e){
    console.log(`readystate: ${document.readyState}\n`);
});

document.addEventListener('DOMContentLoaded', function(e){
    console.log(`DOMContentLoaded`);
});
// jeżeli poniższy kod będzie sprawiał problem, ...
document.body.onclick = function(){alert('gotowy')};
// ...umieść go we właściwym słuchaczu zdarzenia ??Load

Zasoby lekcji

Przygotowanie