Event-Handler dynamisch generieren im MS IE

[Jeythor]

Also, es geht um folgendes:
Ich möchte auf meiner Homepage ein Suchfeld machen, das einem Vorschläge zu den bereits eingegebenen Zeichen gibt, so ähnlich wie es von YouTube oder Google Suggest kennt.
Bei der Eingabe ("onkeyup") in das Suchfeld, wird eine Javascript-Funktion aufgerufen, die zuvor in einer eingebundenen .js-Datei definiert wurde. Im Firefox funktioniert soweit alles wie ich es will, nur der Internet Explorer hat mal wieder seine Probleme. Zwar kann der IE die Liste mit den Vorschlägen korrekt generieren, allerdings scheitert es daran, den generierten divs die Attribute "onclick", "onmouseover", usw. zuzuweisen. Hier mal die Javascript-Funktion:

function seek_sugg ()
{
 var seekstr = document.forms["search"].elements["field"].value;
 var outerdiv = document.getElementById("sugg_list");

var myRXP = new RegExp("^" + seekstr, "i");

if(seekstr.length > 0)
 {
  outerdiv.innerHTML = "";

for(i=1; i<=500; i++)
  {
   if(wordlist[i].search(myRXP) != -1)
   {
    var new_div = document.createElement("div");
    var new_attr = document.createAttribute("id");
    new_attr.nodeValue = "sugg" + i;
    new_div.setAttributeNode(new_attr);
    var new_attr = document.createAttribute("class");
    new_attr.nodeValue = "div_sugglist";
    new_div.setAttributeNode(new_attr);
    var new_attr = document.createAttribute("onclick");
    new_attr.nodeValue = "window.location.href='?p=" + i + "'";
    new_div.setAttributeNode(new_attr);
    var new_attr = document.createAttribute("onmouseover");
    new_attr.nodeValue = "javascript: sugglisthover(" + i + ", 'in')";
    new_div.setAttributeNode(new_attr);
    var new_attr = document.createAttribute("onmouseout");
    new_attr.nodeValue = "javascript: sugglisthover(" + i + ", 'out')";
    new_div.setAttributeNode(new_attr);
    var new_text = document.createTextNode(wordlist[i]);
    new_div.appendChild(new_text);
    outerdiv.appendChild(new_div);
   }
  }
 }
}

Also, zur Funktionsweise: Wenn die Funktion aufgerufen wird, wird die Eingabe aus dem Feld geholt und in "seekstr" gespeichert. "outerdiv", ist wie der Name schon sagt, das äußere div, in dem alle divs mit den Vorschlägen angezeigt werden. Mittels RegExp wird dann in einer Liste von 500 Worten nach Übereinstimmungen gesucht. Die Wörter sind im Array "wordlist" gespeichert, das per for-Schleife durchlaufen wird. Wenn der Suchbegriff am Anfang des jeweiligen Wortes gefunden wird, wird ein neues div generiert, das dann den Vorschlag enthält. Damit dann beim Anklicken und Überfahren der Liste auch was passiert, werden logischerweise die Event-Handler gebraucht, die ebenfalls per createAttribute hinzugefügt werden.
Wie gesagt, im Firefox funktioniert das alles wunderbar, nur der IE weigert sich strikt die Attribute "onclick" etc. per Javascript hinzuzufügen. Wollte nun fragen, ob da jemand eine andere Möglichkeit kennt, diese Attribute dynamisch zu erzeugen, so dass auch der IE das richtig macht.

[Struppi]

var new_attr = document.createAttribute("id");
    new_attr.nodeValue = "sugg" + i;
    new_div.setAttributeNode(new_attr);

Das ist komplett überflüssig, ein DIV hat immer eine ID, d.h. du musst diese nicht erzeugen, sondern kannst sie direkt zuweisen:

new_div.id = "sugg" + i;

var new_attr = document.createAttribute("class");
    new_attr.nodeValue = "div_sugglist";
    new_div.setAttributeNode(new_attr);

Hier gilt das gleiche, nur das das Attribut className heißt.

var new_attr = document.createAttribute("onclick");
    new_attr.nodeValue = "window.location.href='?p=" + i + "'";
    new_div.setAttributeNode(new_attr);

Events lassen sich am einfachsten so zuweisen:

new_div.onclick = function(e) {  
window.location.href = '?p=' + i;  
}  

Allerdings scheitert hier die Zuweisung von i, da beim Aufruf der Funktion immer das letzte i genommen wird. Da du das i anscheinend immer brauchst, ist es am einfachsten dies als Attribut an das Element zu hängen.

  
new_div.i = i;  
new_div.onclick = function(e) {  
window.location.href = '?p=' + this.i;  
};  

genauso mit der onmouseover Funktion:

new_div.onmouseover = function(e) {  
sugglisthover(this.i, 'in');  
};  

usw.

Struppi.

[Jeythor]

Wow, danke für die Hilfe, funktioniert alles perfekt jetzt.
Nur noch aus Neugier, wofür steht das "e" in den runden Klammern, bei den Funktionen, die den Event-Handlern zugewiesen werden? Ist das so eine Art "Dummy"-Parameter?

MfG, Jeythor

[Alexander (HH)]

Moin Moin!

Nur noch aus Neugier, wofür steht das "e" in den runden Klammern, bei den Funktionen, die den Event-Handlern zugewiesen werden? Ist das so eine Art "Dummy"-Parameter?

Brauchbare Browser übergeben dort das Event-Objekt, das der MSIE in window.event global vorhält. Wenn Du das Event-Objekt benötigst (z.B. um herauszufinden, wo ein Event stattgefunden hat oder welche Taste daran beteiligt war), ist folgendes der gängige Weg:

  
function meinEventHandler(ev)  
{  
  ev||=window.event; /* MSIE compatibility */  
  
  // weiterer Code arbeitet ausschließlich mit ev,  
  // das funktioniert dann in "allen" Browsern.  
}  

Alle "normalen" Browser übergeben das Event-Objekt in ev, Objekte werden in boolschem Kontext im allgemeinen als TRUE evaluiert, sprich: die Zuweisung findet nicht statt. Der IE übergibt nichts, ev ist undefiniert, was im boolschen Kontext zu FALSE evaluiert, die Zuweisung ev=window.event findet statt. In jedem Fall ist anschließend das Event-Objekt in ev.

Alexander

[molily]

Hallo,

ev||=window.event; /* MSIE compatibility */

Was ist das, Ruby? Also JavaScript kennt diesen Operator nicht.

ev = ev || window.event;

Mathias

[Alexander (HH)]

Moin Moin!

Hallo,

ev||=window.event; /* MSIE compatibility */

Was ist das, Ruby?

Perl. Mag sein, dass Ruby auch abgekupfert hat.

Also JavaScript kennt diesen Operator nicht.

Was ein wenig wunderlich ist, denn andere Operatoren wie + - * / % << >> >>> & ^ | lassen sich mit einer Zuweisung verbinden.

ev = ev || window.event;

Also wie in grottigem C / C++.

Alexander