nicht angemeldet
Hallo,
Hier mal die stark verkürzte Funktion, ich hoffe ich habe nichts Wichtiges weggelassen:
Ich vermute schon.
Nun habe ich noch eine andere Funktion, mir der ich per Index direkt zu einem bestimmten Bild springen kann. In dem Fall tausche ich nur das src-Attribut aus. In dieser Funktion gibt es keine Animation. Dennoch wird das neue Bild animiert. Und zwar wohl weil hier auch wieder das img.on(load) greift.
Das ist logisch.
Wenn du ein frisches img-Element erstellst, das noch nicht im DOM hängt, und es beim load-Ereignis ins DOM einhängst, dann ist der Event-Handler immer noch aktiv.
Wenn du später das img-Element wiederverwendest und die src änderst, passiert dort ein weiteres load-Ereignis und der Handler wird aufgerufen.
Wenn du das nicht willst, musst du den Handler beim ersten load wieder entfernen. jQuery hat mit one eine Extra-Methode dafür. Diese entfernt den Handler nach dem ersten Ereignis des Types automatisch.
Mich verwirrt dieses Verhalten etwas, weil ich dachte, dass img.on(load) gilt nur innerhalb der slideBild-Funktion.
Event-Handling hat mit dem Scope von Funktionen nichts zu tun. img.on('load', function(){}) überwacht sämtliche load-Ereignisse beim angegebenen Element, solange das Element existiert.
Aber offenbar greift das Mistvieh wohl global.
Nein, das kann nicht sein.
Um das load-Event nur auf das eine gerade neu erstellte Bild zu beschränken
Event-Handler sind immer auf das Element beschränkt, bei dem sie registriert wurden.
Es gibt natürlich die Bubbling- und Capturing-Phasen beim Event-Dispatching. Mit jQuerys img.on('load', function(){}) registrierst du Event-Handler für die Target- bzw. Bubbling-Phase.
hab ich mal zusätzlich eine id="neu" vergeben und diese im on(load) als Selektor mit angegeben und das Event beim übergeordneten div registriert. Aber damit reagiert das Event nun überhaupt nicht mehr.
Das ist klar. Load-Ereignisse steigen nicht auf (es gibt keine Bubbling-Phase).
http://www.w3.org/TR/html5/embedded-content-0.html#img-load
http://www.w3.org/TR/html5/webappapis.html#fire-a-simple-event
var slideBild = function () {
var img = $('<img/>');
img.attr('src','bild.jpg');
img.attr('id', 'neu');$('div').on('load', '#neu', function() {
Das ergibt keinen Sinn, selbst wenn img in das div eingehängt wird. Das load-Ereignis wird das div nicht erreichen, da es nicht aufsteigt.
Event-Delegation für load-Ereignisse ist möglich, aber nur in der Capturing-Phase – also nicht mit diesem jQuery-Idiom.
Mathias
--
[Chaplin.js - JavaScript application architecture](http://chaplinjs.org/)