Strona główna HTML i javascript C++ Hardware HTML i javascript Java Software SQL

Javascript - rejestrowanie zdarzeń na stronie.

Dodano: 2012-01-27

W raz z rozwojem języka javascript jak i powstawaniem nowych standardów kodowania stron www, sposoby przypisywania reakcji na zdarzenia na stronie też ewoluowały.

Początkowo aby móc zareagować na zdarzenie w tagu należało zdefiniować odpowiedni atrybut (np.: onclick, onmauseover) oraz przypisanie mu funkcji, która miała się wykonać po wystąpieniu określonej sytuacji, taki sposób jest nazywamy rejestrowaniem inline. Wada takiego rozwiązania była dosyć oczywista, można było jedną funkcję przypisać konkretnej sytuacji, lub tworzyć funkcję, która wywoływała kilka funkcji po wystąpieniu zdarzenia.

Po wpisywaniu dużej ilości atrybutów, strona stawała się mało przejrzysta. Pisząc kod w javascript, koder w razie zmian musiał odszukiwać element, którego dotyczyła operacja, pół biedy jeżeli na stronie był tylko jeden, problem zaczynał się jeżeli było ich kilka ;) Przykładowe użycie starego sposobu rejestrowania zdarzeń:

<html>
<head>
<script type="text/javascript">

function cl(){
	window.alert("klik ;)");
}

</script>
</head>

<body>
<input type="button" value="klik" onclick="cl();">
</body>
</html>

W raz z pracami nad standaryzacją kodowania stron www, wydzielono na stronię trzy główne elementy:

  • treść - tekst, obraz, film, dźwięk itp.
  • strukturę - jest to użycie tagów, w celu określenia czym dany element jest na stronie,
  • prezentację - CSS definiujące w jak wygląda i co ma się dziać z elementami na stronie po ich wyświetleniu lub najechaniu na nie myszką.
  • skrypty - wydzielił bym tu jeszcze jedną grupę, która ma bardzo ważne miejsce w tworzeniu stron www.

Po pojawieniu się standardów, zaczęto rejestrować zdarzenia poprzez dostęp do nich przez obiekt i przypisywanie mu określonej akcji np.: object.onlcick = doSomthing. Poniżej przykład nowego sposobu reagowania na zdarzenie:

<html>
<head>
<script type="text/javascript">

function cl(){
	window.alert("klik ;)");
}

</script>
</head>

<body>
<input id="KLIK" type="button" value="klik" >

<script type="text/javascript">
	document.getElementById("KLIK").onclick = cl;	
</script>
</body>
</html>

Zwróć uwagę na przypisanie funkcji cl, jeżeli dodano by nawiasy, wykonała by się ona po załadowaniu strony jednak nie zostałaby przypisana zdarzeniu onclick.

Najnowszy standard, zmienił definitywnie rejestrowanie zdarzeń, dzięki czemu można przypisać jednej sytuacji kilka działań, bez obawy, że wcześniejsze zostaną zastąpione nowymi. Dzięki stosowaniu standardów, strona którą tworzysz będzie zachowywała się tak jak chcesz w większości przeglądarek. Do rejestrowania zdarzeń wykorzystano tutaj słowo kluczowe attachEvent([event], [function]) w przypadku IE, oraz addEventListener([event], [function], false) w przypadku F, O, Ch. Poniżej znajduje się przykład jak dodawać zdarzenie w zależności od wersji przeglądarki.

<html>
<head>
<script type="text/javascript">

function addEventListner(ev, fun, objId){
	var obj = document.getElementById(objId);
	if (obj.addEventListener) {
 		obj.addEventListener(ev, fun, false);
	 } else if (obj.attachEvent)  { //ie
		obj.attachEvent("on"+ev, fun);
	 } 
}

function cl01(){
	window.alert("klik 01");
}

function cl02(){
	window.alert("klik 02");
}

</script>
</head>

<body>
<input id="KLIK" type="button" value="klik" >

<script type="text/javascript">
	addEventListner("click", cl01, "KLIK");
	addEventListner("click", cl02, "KLIK");
</script>
</body>
</html>

Trochę o standardach HTML wikipedia
Specyfikacja javascript ECMA-262, 5.1 Edition