Event objektet i Internet Explorer og Firefox

Sad på Statsbiblioteket og skulle lave en logging funktion til den nye søgemaskine Summa. Vi har allerede flere logging funktioner tilknyttet Summa, men nu skulle vi bruge noget der kunne logge alle klik på links med AJAX funktionerne. Problemet med at logge links, der udfører AJAX kald, er at siden ikke skiftes/opdateres 100%, men kun opdateres lokalt.

event.srcElement i Internet Explorer

Løsningen er event.srcElement, der kan læse onclick events i JavaScript. Det smarte ved funktionen er at den kan aflæse alle attributterne i det tag du knytter den til.

F.eks. vil event.srcElement.href returnere hvilken link, der henvises til og event.srcElement.onclick vil fortælle hvilke onclick events, der er tilknyttet tagget.

event.target i Firefox

Desværre findes event objektet desværre i 2 forskellige udgaver. Funktionaliten er ikke helt ens for Firefox og Explorer event objektet, men til basale funktioner, som f.eks. at aflæse onclick, onmouseover eller onmouseout events, har forskellen ingen praktisk betydning.

I Firefox bruges syntaksen:

event.target

En crossbrowser løsning

Men nok snak. Lad os kigge på noget kode, der virker med begge browsere (faktisk virker det også med Safari. (Safarai har nemlig sin helt egen særhed på event objektet) :

function log(e) {

//Opsætning af event.srcElemenet/event.target objekt i henh. IE og Firefox
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
  targ = targ.parentNode;

//Indsamling af data
var id  = targ.id;
var href  = targ.href;
var onclick  = targ.onclick;
var data = “onclick: ” + onclick + “\n\nID: ” + id + “\n\nhref: ” + href;

//Tiden med dato objektet
var now  = new Date();
var hour   = now.getHours();
var minute  = now.getMinutes();
var second  = now.getSeconds();
var monthnumber = now.getMonth() + 1;
var monthday = now.getDate();
var year = now.getFullYear();

//Tidsformateringer
var tidspunkt = monthday + “-” + monthnumber + “-” + year + ” ” + hour +”:” + minute + “:” + second + “\n\n”;

//Tjek af data med en alert
alert(tidspunkt + data);

//overførsel til serveren via prototype Ajax.Request
// du skal altså have adgang til Prototype.js fra filen for at denne del virker
new Ajax.Request(‘globals/jsp/log.jsp’, {
      method: ‘get’,
      parameters:{
      data1: tidspunkt + data}
    });

}

Vigtigt! Når du kalder funktionen skal du sende parameteren “event” med ellers virker det ikke i Firefox. Funktionskaldet skal altså se sådan ud:

onclick=”log(event)”

Microsoft kan ikke se den medfølgende event parameter, og vil derfor ignorere den. Læs den grundige forklaring om event properties.

Send data fra klienten til serveren

Efterfølgende skal data sendes fra klienten til serveren, så man kan gemme data i sin log fil. Dette gøres lettest med AJAX og et af de gode AJAX biblioteker, der findes. Jeg har brugt en løsning med prototype. Hvis du ønsker at sende data fra klient til server på en anden måde. F.eks. som en parameter i URL’en eller som et hidden input felt i en formular, skal du bare slettet den sidste kode blok.

Blog om foto, web og brugervenlighed