Element onMouseOver & onMouseOut hinzufügen

[zer0]

Hallo,

ist es möglich statt das onMouseOver-Attribut anzugeben dieses per Javascript zusetzen?

// Statt
<a id="link" onmouseover="show()" href="#">

// Mein versuch
var link = document.getElementById("link"); 
link.onmouseover = show;

Bei jQuery gibt es diese Möglichkeit ja auch, im nachhinein Eventshandler einem Element an zu hängen.

Gruß

 

[CPoly]

Dein Versuch ist völlig richtig. Ich tippe aber mal, dass du "getElementById" aufrufst, bevor das Element geladen wurde. Also steck die beiden Zeilen z.B. in window.onload.

window.onload = function() {
    var link = document.getElementById("link"); 
    link.onmouseover = show;
};

function show() {
    document.title = "Funktioniert!";
}

Edit: Noch schöner ist vermutlich so.

link.addEventListener("mouseover", show, false);

 

[zer0]

Hey,
vielen Dank! Klappt perfekt!

Beide Beispiele funktionieren!

window.onload wird auch von jedem gängigem Browser untersützt?

window.onload = function() {
    var link = document.getElementById("link"); 

    link.addEventListener("mouseover", show, false);
    link.addEventListener("mouseout", hide, false);

    link.onmouseover = show;
    link.onmouseout = hide;
};

Da addEventListener anscheinden vom IE nicht anerkannt wird habe ich auch schon eine Lösung im Web gefunden.

function addEvent( obj, type, fn )
{
   if (obj.addEventListener) {
      obj.addEventListener( type, fn, false );
   } else if (obj.attachEvent) {
      obj["e"+type+fn] = fn;
      obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
      obj.attachEvent( "on"+type, obj[type+fn] );
   }
}

Danke schön!

 

[CPoly]

window.onload wird auch von jedem gängigem Browser untersützt?

Ja. Siehe Auszug aus dem jQuery Quelltext:

// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
	//....

	// A fallback to window.onload, that will always work
	window.addEventListener( "load", jQuery.ready, false );

// If IE event model is used
} else if ( document.attachEvent ) {
	//....
	// A fallback to window.onload, that will always work
	window.attachEvent( "onload", jQuery.ready );
        //....
}

 

[zer0]

Okay!

Der Code auszug prüft ob die Funktion addEventListener vorhanden ist, wenn ja wird dem window.onload die jQuery ready() Funktion übergeben um sodass diese geladen wird wenn das DOM ready ist.

Das selbe für den IE nur mit attachEvent.

Sehe ich das so richtig? Warum nicht einfach allgemein nur window.onload benutzen?

Kenne mich noch relatib wenig in Javascript aus, deswegen die Fragen

Gruß

 

[CPoly]

Ich habe Sachen ausgelassen (//...), weil ich nur zeigen wollte, dass window.onload immer funktioniert. Hier ungekürzt (Ist ein Auschnitt aus der Funktion "bindReady" die sich eben darum kümmert, das Ereignis zu binden):

if ( document.addEventListener ) {
	// Use the handy event callback
	document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
	
	// A fallback to window.onload, that will always work
	window.addEventListener( "load", jQuery.ready, false );

// If IE event model is used
} else if ( document.attachEvent ) {
	// ensure firing before onload,
	// maybe late but safe also for iframes
	document.attachEvent("onreadystatechange", DOMContentLoaded);
	
	// A fallback to window.onload, that will always work
	window.attachEvent( "onload", jQuery.ready );

	// If IE and not a frame
	// continually check to see if the document is ready
	var toplevel = false;

	try {
		toplevel = window.frameElement == null;
	} catch(e) {}

	if ( document.documentElement.doScroll && toplevel ) {
		doScrollCheck();
	}
}

Edit: Einfach nur window.onload zu nehmen wird deshalb nicht gemacht:
1. jQuery versucht das domready-Event zu binden. Denn anders als onload muss man dann nicht warten, bis alle Resourcen (css, js, grafiken) geladen sind, sondern nur bis das HTML-Dokument fertig ist.
2. Die Schreibweise "window.onload = ..." ist nicht empfehlenswert, da man sich so eventuell vorher gesetzte Handler überschreibt. Mit addEventListener bzw. attachEvent kann man beliebig viele Handler benutzen und diese auch wieder entfernen.

 

[zer0]

Ohje, ich werde immer verwirrter

Ok, aber für was wird dann noch der "Fallback" gemacht, also:

    // A fallback to window.onload, that will always work
    window.addEventListener( "load", jQuery.ready, false );

Gruß

 

[CPoly]

Weil nicht jeder Browser DOMContentLoaded untersützt. Deshalb ja auch "fallback". In der jQuery.ready Funktion wird dann überprüft, ob bereits das ready-Event ausgelöst wurde und falls nicht, wird es getan.

 

[zer0]

Hey,

vielen Dank für die ganzen Erklärungen!

Habe mir das jQuery Beispiel jetzt so angepasst wie ich es brauche.

Trotzdem, kann mir noch jemand bei dieser Funktion den IE Teil erklären?

function addEvent( obj, type, fn )
{
   if (obj.addEventListener) {
      obj.addEventListener( type, fn, false );
   } else if (obj.attachEvent) { // Ab Hier!
      obj["e"+type+fn] = fn; // Für was?
      obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } // Und hier?
      obj.attachEvent( "on"+type, obj[type+fn] );
   }
}

Gruß

 

[CPoly]

Ich habe noch nie IE spezifisches Javascript geschrieben, von daher kann es auch falsch sein, was ich jetzt erkläre.

Ich denke dadurch wird ermöglicht, dass man
1. Events auch selbst feuern kann
2. Eigene Events benutzen kann

Aus diese Gründen werden im IE dem Objekt zwei neue Funktionen verpasst.

Da ich nicht weiß in wie weit du dich mit Javascript und Objekten auskennst, hier ein kurzes Beispiel.

var obj = {
    test: "Das ist ein Text",
    foo: function() {alert("Foo!");},
};
//Jetzt haben wir ein Objekt und können auf die Eigenschaften zugreifen.
alert(obj.test);
obj.foo();

//Der Zugriff auf Objekte geht aber auch so
obj["foo"]();

//Wir können aber auch jeder Zeit neue Eigenschaften hinzufügen
obj["hallo"] = function() {alert("hallo!");};

obj.hallo();
obj["hallo"]();

Ich liebe Javascript :-D

//Man kann auch über alle Eigenschaften iterieren und z.B. alle Funktionen einmal ausführen
for(var attr in obj)
    if(typeof obj[attr] === 'function')
        obj[attr]();