Sep
22

Nowoczesna obsługa zdarzeń

AdministratorJavaScript

Specyfikacja obiektowego modelu dokumentu W3C DOM wprowadza nowoczesny sposób obsługi zdarzeń. Niestety model ten nie jest dostępny w przeglądarce Internet Explorer (nawet w najnowszych wersjach) i aby go wykorzystać należy dodać alternatywny sposób jego obsługi.
Funkcja dodająca zdarzenie korzysta z metody addEventListener dla przeglądarek zdognych z DOM oraz attachEvent w przypadku Interet Explorer'a:

Zwykły tekst
JavaScript:
  1. function addEvent(obj, type, fn) {
  2.     if(obj.addEventListener){
  3.         obj.addEventListener(type,fn,false);
  4.         return true;
  5.     } else if(obj.attachEvent) {
  6.         obj['e'+type+fn] = fn;
  7.         obj[type+fn] = function(){obj['e'+type+fn](window.event);}
  8.         var r = obj.attachEvent("on"+type,obj[type+fn]);
  9.         return r;
  10.     } else {
  11.         return false;
  12.     }
  13. }

Funkcja usuwająca zdarzenie korzysta z metody removeEventListener dla przeglądarek zdognych z DOM oraz detachEvent w przypadku Internet Explorer'a:

Zwykły tekst
JavaScript:
  1. function removeEvent(obj,type,fn) {
  2.     if(obj.removeEventListener) {
  3.         obj.removeEventListener(type,fn,false);
  4.         return true;
  5.     } else if(obj.detachEvent) {
  6.         var r = obj.detachEvent('on'+type,obj[type+fn]);
  7.         obj[type+fn] = null;
  8.         return r;
  9.     } else {
  10.         return false;
  11.     }
  12. }

Aby programowo wywołać dodane zdarzenie należy skorzystać z metody disptachEvent dla przeglądarek zgodnych z modelem DOM oraz fireEvent dla Internet Explorer'a:

Zwykły tekst
JavaScript:
  1. function triggerEvent(obj, type) {
  2.     if(obj.dispatchEvent) {
  3.         var evt = document.createEvent("MouseEvents");
  4.         evt.initMouseEvent(type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  5.         return obj.dispatchEvent(evt);
  6.     } else if(obj.fireEvent) {
  7.         return obj.fireEvent('on'+type);
  8.     } else {
  9.         return false;
  10.     }
  11. }

Leave a Reply

You must be logged in to post a comment.