Podpinanie eventów w JavaScript

Kiedy chcemy dopiąć sobie event do jakiegoś elementu na stronie przez JavaScript mamy 2 metody.

1. Przestarzała, i nie smaczna:

KOD

element.onclick = function() {
// Kod
}

// lub

function klik() {
// Kod
}
element.onclick = klik;

Wada - nie można dopiąć więcej niż jednej funkcji do eventu.

2. Lepsza, ale trochę trudniejsza
Dlaczego trudniejsza? IE nie obsługuje standardu podpinania eventów
Kod dla IE:

KOD

element.attachEvent('onclick',function() {
// Kod
});

// lub
function klik() {
// Kod
}

element.attachEvent('onclick', klik);

Kod dla reszty świata:

KOD

element.addEventListener('click',function() {
// Kod
}, false);

// lub
function klik() {
// Kod
}

element.addEventListener('click', klik, false);

3. Jak ułatwić sobie życie?
Napiszemy funkcję, która będzie podpinać event i w IE, i w innych przeglądarkach:

KOD

function bindEvent(obj, event, func) {
try {
/* Wersja dla normalnych przeglądarek */
obj.addEventListener(event,func,false);
} catch(e) {
try {
/* Wersja dla IE, wykonywana gdy powyższy kod nie wypali */
obj.attachEvent('on'+event,func);
} catch(e) { /* Nie udało się podpiąć :( Prawdopodobnie jakaś średniowieczna przeglądarka. */ }
}
}

Przykład użycia

KOD

bindEvent(document /* obiekt do którego chcesz podpiąć event */, "load" /* nazwa eventu !BEZ "on"! */, /* funkcja, w tym wypadku anonimowa */ function() {
alert("Tak, to działa! :)");
});

Zgłoś swój pomysł na artykuł

Podpinanie eventów w JavaScript

Więcej w tym dziale Zobacz wszystkie

Najnowsze

Forthing debiutuje w Polsce. Nowa chińska marka szokuje cena...

Czy ubezpieczenie OC dla samochodu na gaz jest droższe?

Monopoly – poznaj historię kultowej gry planszowej

Tatuś mile widziany! Uroczystości przedszkolne i szkolne, na...

Drzwi ukryte – co warto o nich wiedzieć?

title