• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Anfängerfragen zum Verständnis

D

DarkOverlord

New member
Hi,
ich arbeite mich gerade mit einigen Tutorials in Javascript ein. Leider hab ich auch durch die Suche ein paar grundlegende Fragen nicht klären können, die sich bei mir auftun. FAQ hab ich auch durchgeschaut.

Wenn ich einen Eventhandler erstelle und einem Event zuweise, tue ich das z.B. so $(window).scroll( function() {...} );
1. Wie lange gilt diese Zuweisung dann? Reicht es, wenn ich diese Zeile einmalig aufrufe und danach wird bei jedem Event dieser Handler automatisch aufgerufen?

Ich frage, weil ich ein Beispielprogramm hatte mit einer Tabellenbearbeitung über Ajax, welche nach jedem Neuladen einer Tabellenzeile aus der MySql-Datenbank alle Eventzuweisungen erst gecleart und danach neugesetzt hatte, damit sie auch auf die neu hinzugefügten / geänderten Tabellenelemente zugewiesen werden. Also heißt das, dass wenn ich Events setze, diese auch zukünftig nur für die Tags verknüpft sind, welche zum Zeitpunkt der Zuweisung bestanden? Dann müsste ich jedesmal, wenn ich relevanten Html-Content verändere auch alle Events clearen und neusetzen?

2. Wo schreibe ich diese Anweisung hin? Wenn ich das richtig verstanden habe, sollte ich ALLE (auch diese) Anweisung innerhalb der Ready()-Routine einfügen, damit sie erst stattfinden, nachdem die Page geladen hat. Also steht ja fast mein ganzer Quellcode innerhalb dieser Ready-Funktion $(document).ready( function() {..... mein ganzer Quellcode ... });. Kommt mir komisch vor, stimmt das so?

3. Falls ich also meine Funktionen alle innerhalb der Ready-Routine definiere, sind diese dann überhaupt global gültig, dass ich sie auch von anderen Orten des Quellcodes aufrufen kann?

4. Muss ich Funktionen definieren an Stellen bevor ich sie aufrufe oder liest der Interpreter erst den gesamten Code ein? Also kann ich in der Ready()-Routine auf Funktionen zugreifen, welche ich im Quellcode erst später definiere? Denke nicht, aber frage lieber mal.

Gruß
 
Zuletzt bearbeitet von einem Moderator:
DarkOverlord schrieb:
1. Wie lange gilt diese Zuweisung dann? Reicht es, wenn ich diese Zeile einmalig aufrufe und danach wird bei jedem Event dieser Handler automatisch aufgerufen?
Zum Vergrößern anklicken....
Der Eventlistener bleibt so lange auf dem Objekt registriert, wie das Objekt existiert - also im Falle von window, bis du die Seite verlässt oder neu lädst.
Aber du hast hier jQuery-Code, das Events auf entfernt, wenn du das Objekt aus dem DOM aushängst.
DarkOverlord schrieb:
Dann müsste ich jedesmal, wenn ich relevanten Html-Content verändere auch alle Events clearen und neusetzen?
Zum Vergrößern anklicken....
Musst du nicht unbedingt - kommt darauf an, wo und wie du deine Eventlistener genau registriert hast.
DarkOverlord schrieb:
Kommt mir komisch vor, stimmt das so?
Zum Vergrößern anklicken....
Wenn du jQuery verwendest, ist das der Standardfall. Aber du kannst deinen Code auch einfach in einem <script> ganz am Ende des <body>s einfügen - dann ist das DOM auch schon fertig aufgebaut.
DarkOverlord schrieb:
Falls ich also meine Funktionen alle innerhalb der Ready-Routine definiere, sind diese dann überhaupt global gültig, dass ich sie auch von anderen Orten des Quellcodes aufrufen kann?
Zum Vergrößern anklicken....
Nein, dann sind das lokale Funktionen in der Funktion, die im document.ready aufgerufen wird.
DarkOverlord schrieb:
Muss ich Funktionen definieren an Stellen bevor ich sie aufrufe oder liest der Interpreter erst den gesamten Code ein?
Zum Vergrößern anklicken....
Das kommt darauf an, wie du deine Funktionen definierst. Funktionsdeklarationen werden nach oben "geschoben" und können somit überall im Gültigkeitsbereich verwendet werden. Ich würde aber empfehlen, Funktionen erst zu verwenden, nachdem du sie definiert hast.
 
Hi,
danke für deine ausführlichen Antworten.

Also könnte ich, um ein bisschen mehr Übersicht zu schaffen, alle Eventhandler-zuweisungen innerhalb der Ready-Funktion tätigen und die zugehörigen Eventhandler-Funktionen selbst am Ende von <body> innerhalb <script> definieren. Dann wären die Funktionen auch global zugängig und auf jeden Fall verfügbar, sobald die DOM aufgebaut und Ready aufgerufen wurde!?

- - - Aktualisiert - - -

Eine Frage hätte ich noch gerade... Ich habe folgenden Code (Auszug aus dem Ready-Teil) geschrieben:

Code: 
TopScroll = function()
{ ... }

TopScroll();
$(window).scroll( TopScroll );

Nun kann ich aber in der letzten Zeile keine Argumente übergeben (Fehlermeldung wenn ich da Klammern einsetze). Müsste ich dann stattdessen die Funktion mit function TopScroll() {...} definieren, dass der Funktionsname selbst TopScroll lautet, damit ich da Argumente mitgeben kann?

Code: 
$(window).scroll( Funktion1 );
$(window).scroll( Funktion2 );
Außerdem, gibt es noch eine schnellere Möglichkeit als die obige, um einem Event per jQuery mehrere Funktionsaufrufe zuzuweisen?

Gruß & schönen Abend.
 
DarkOverlord schrieb:
Nun kann ich aber in der letzten Zeile keine Argumente übergeben (Fehlermeldung wenn ich da Klammern einsetze). Müsste ich dann stattdessen die Funktion mit function TopScroll() {...} definieren, dass der Funktionsname selbst TopScroll lautet, damit ich da Argumente mitgeben kann?
Zum Vergrößern anklicken....
Da gibt es mehrere Möglichkeiten, spontan:
Anonyme Funktion...
Code: 
TopScroll = function(argument1, argument2)
{
    alert('argument1: ' + argument1);
    alert('argument2: ' + argument2);
};

$(window).scroll(function () {
    TopScroll(argument1, argument2);
});
Prototype bind()...
Code: 
TopScroll = function(argument1, argument2)
{
    alert('argument1: ' + argument1);
    alert('argument2: ' + argument2);
};

$(window).scroll(TopScroll.bind(this, argument1, argument2));
jQuery event data objekt...
Code: 
TopScroll = function(event)
{
    var argument1 = event.data.argument1,
        argument2 = event.data.argument2;

    alert('argument1: ' + argument1);
    alert('argument2: ' + argument2);
};

$(window).on('scroll', {
    argument1: 'argument1',
    argument2: 'argument2'
}, TopScroll);

DarkOverlord schrieb:
Code: 
$(window).scroll( Funktion1 );
$(window).scroll( Funktion2 );
Außerdem, gibt es noch eine schnellere Möglichkeit als die obige, um einem Event per jQuery mehrere Funktionsaufrufe zuzuweisen?

Gruß & schönen Abend.
Zum Vergrößern anklicken....
Dies wäre eine Möglichkeit:
Code: 
$(window).scroll(function () {
    Funktion1();
    Funktion2();
});
 
DarkOverlord schrieb:
Also könnte ich, um ein bisschen mehr Übersicht zu schaffen, alle Eventhandler-zuweisungen innerhalb der Ready-Funktion tätigen und die zugehörigen Eventhandler-Funktionen selbst am Ende von <body> innerhalb <script> definieren. Dann wären die Funktionen auch global zugängig und auf jeden Fall verfügbar, sobald die DOM aufgebaut und Ready aufgerufen wurde!?
Zum Vergrößern anklicken....
Das könnte man machen. Aber wenn du in einem <script> wirklich nur Funktionen definierst, hast du sie in den <head> packen - macht das Ganze etwas robuster.
 
Hi !

Um nicht extra einen neuen Thread zu öffnen, nutze ich mal meinen alten und hoffe, dass die Frage noch jemand liest...

Ich habe eine Funktion definiert:
Bla = function (var i) { ... }

Wieso kann ich einen Funktionsaufruf nicht folgendermaßen mit einem Event verknüpfen?...
$(window).click( Bla (3) );

Wenn ich es so mache, geht es, aber ist ja doof dafür eine neue Funktion zu definieren...
$(window).click( function() { Bla(3); } );

Liegt das an der Art, wie ich meine Funktion definiert habe, also sollte ich es besser so machen:
function Bla(var i) { ... }

Hab schon hin und her probiert mit und ohne Semikolon, aber peile es irgendwie nicht..

Gruß
 
Zuletzt bearbeitet von einem Moderator:
DarkOverlord schrieb:
Wieso kann ich einen Funktionsaufruf nicht folgendermaßen mit einem Event verknüpfen?...
$(window).click( Bla (3) );
Zum Vergrößern anklicken....
click erwartet eine funktionsreferenz, bla(3) ist ein funktionsaufruf.
im 1. fall speichert sich jquery/der browser diese funktion und ruft sie auf, wenn das event auftritt.
im 2. fall wird die funktion sofort aufgerufen. wenn bla(3) eine funktionsreferenz liefert, ist das auch ok
Code: 
function bla(i)
{
 return function ()
 {
   alert(i);
 };
}
$(window).click(bla(3));

DarkOverlord schrieb:
Wenn ich es so mache, geht es, aber ist ja doof dafür eine neue Funktion zu definieren...
$(window).click( function() { Bla(3); } );
Zum Vergrößern anklicken....
wieso?

DarkOverlord schrieb:
Liegt das an der Art, wie ich meine Funktion definiert habe, also sollte ich es besser so machen:
function Bla(var i) { ... }
Zum Vergrößern anklicken....
nee, das ändert nichts an der sache, wann die funktion aufgerufen wird
 
hm, ganz verstanden hab ich den unterschied noch nicht. also das was ich geschrieben hatte, war ein funktionsaufruf, das hab ich verstanden. und das darf man wohl dort nicht anbringen. wie würde dann die übergabe einer funktionsreferenz aussehen? wäre das dann folgendes:

HTML: 
Bla = function() { ... }
$(window).click( Bla );
So funktioniert es zwar, aber dann weiss ich nicht wie ich hierbei Argumente an Bla übergeben kann? weil sobald ich ja eine klammer an den funktionsbezeichner anhänge, geht es wieder nicht.

Danke aber für die Antworten!
 
Zuletzt bearbeitet von einem Moderator:
Entweder du machst es, wie auch in #9 geschrieben, mit einer anonymen Funktion oder du arbeitest mit .bind(): $(window).click(Bla.bind(window, 3));

Ich würde ersteres machen.
 
DarkOverlord schrieb:
hm, ganz verstanden hab ich den unterschied noch nicht.
Zum Vergrößern anklicken....
der unterschied ist, wenn der browser an die stelle kommt mit $(window).click( Bla(3) ); ruft er die funktion bla auf, führt sie aus und liefert das ergebnis an $(window).click.
bei $(window).click( Bla ); übergibt er die funktion selbst an $(window).click welche dann irgendwann später aufgerufen wird wenn das event eintrifft.
im 1. fall muss bla eine funktion zurückliefern, da $(window).click eine funktion als argument erwartet
im 2. fall musst du irgendwie dafür sorgen, dass bla das argument bekommt was bla selbst erwartet, da die parameter, welche eine funktion übergeben bekommt, wenn das das event eintrifft, definiert sind(bei click das event-objekt). zusätzliche parameter musst du dir irgendwie merken und beim funktionsaufruf selbst übergeben. dafür gibt es in js mehrere möglichkeiten.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben