Warum musst du das Event-Objekt als Parameter übergeben?

8

Ich lerne, wie man Ereignisse in JavaScript manipuliert, und ich frage mich, "warum müssen Sie das Ereignisobjekt als Parameter (Argument) in eine Funktion übergeben, wenn Sie die Ereignisbehandlung verwenden?"

Hier ist ein Beispiel von dem, worüber ich spreche:

%Vor%

Ich habe den obigen Code geschrieben und ich verstehe ziemlich genau, was er tut. Ich verstehe einfach nicht das ganze (Ereignis) vorbei. Ich dachte darüber nach, dem Ereignisprozedur button_1.onclick eine anonyme Funktion zuzuweisen. Versucht der Event-Handler, ein Event zu übergeben, bevor es zugewiesen wird? ... Ich habe eine schwierige Zeit, dies zu verstehen. Wenn jemand das bitte für mich klären könnte, wäre ich dankbar.

[Ich habe versucht, es bei Google zu suchen, fand aber sehr komplexe Erklärungen und Beispiele. Nur eine einfache bis mittlere Erklärung würde helfen.] =)

Vielen Dank.

    
W3Geek 18.04.2012, 22:02
quelle

5 Antworten

7

Das allgegenwärtige Ereignis, ob Sie es mögen oder nicht

Das Ereignis ist immer vorhanden, auch wenn Sie keinen Namen angeben:

%Vor%

Das ist das gleiche wie das zu sagen:

%Vor%

Das Ereignisobjekt wird bereits an Ihren Rückruf weitergeleitet (ob Sie einen Namen dafür angeben oder nicht), Sie können wählen, es nicht zu verwenden, wenn Sie möchten. Zum Beispiel, wenn wir auf eine jQuery onClick-Methode schaut:

%Vor%

Verwendung davon

Sie werden bemerken, dass ich in meinem Callback kein Ereignisobjekt referenziert habe. Ich bin nicht dazu verpflichtet. Wenn ich es jedoch für welchen Zweck auch immer verwenden möchte, sollte ich ihm einen Namen geben:

%Vor%

Nachdem ich nun selbst Zugriff auf die Ereignisdetails gewährt habe, kann ich das Standardverhalten verhindern, das sich aus dem Ereignis ergeben würde, und ich kann auch verhindern, dass das Ereignis das DOM in andere Elemente aufblubbelt.

Praxisbeispiel

Angenommen, wir wollten auf Klickereignisse auf einem Element achten:

%Vor%

Klicken Sie auf Ereignisse, die für ein Element ausgeführt werden, wenn Sie auf das Element selbst oder eines seiner untergeordneten Elemente klicken. Angenommen, dieses Element hat zwei untergeordnete Elemente:

%Vor%

Wenn Sie auf eines dieser Elemente klicken, wird das große Quadrat, das rote Quadrat oder das blaue Quadrat das "Klick" -Ereignis auf dem großen Quadrat verursachen - nachdem es das Klickereignis auf dem Element ausgelöst hat, auf das Sie zuerst geklickt haben ).

Wir konnten anhand des Ereignisses selbst bestimmen, welches Element das Ziel in einem Klickereignis war:

%Vor%

Beachten Sie hier, wie wir auf die ID des Ziels zugreifen, von dem das Ereignis ausgelöst wurde. Wenn Sie auf das rote Quadrat klicken, wenn dieses Ereignis auf das große Quadrat aufsteigt, sehen wir "redSquare" alarmiert. Das Gleiche gilt für das blaue Quadrat. Wenn Sie darauf klicken, wird das Ereignis auf das große Quadrat gesprungen und wir werden alarmiert "blueSquare" sehen.

Sie können dies online über die folgende Demo testen: Ссылка

Versuchen Sie, auf das orange, rote oder blaue Quadrat zu klicken, um zu sehen, was angezeigt wird.

    
Sampson 18.04.2012, 22:05
quelle
4

Sie übergeben kein Ereignis an die Funktion. Sie benennen den ersten Parameter, der an Ihre Funktion event übergeben wird.

Der Browser ist derjenige, der Ihre Funktion aufruft und beim Aufruf Ihrer Funktion ein Ereignisobjekt übergibt. Sie können wählen, den Parameter function(){} nicht zu benennen, aber der Browser wird das Ereignisobjekt weiterhin übergeben, Sie können es verwenden oder nicht verwenden, wie Sie es für richtig halten.

    
James Montagne 18.04.2012 22:08
quelle
3

Sie übergeben den event -Parameter nirgendwo. Du machst nur eine Funktion, die einen Parameter namens event hat.

Wenn der Browser die Event-Handler aufruft, ruft er die ihm zugewiesenen Funktionen auf und übergibt ihm das Objekt event als 1. Parameter.

P.S. Sie brauchen nicht den () um Ihre Funktion.

%Vor%     
Rocket Hazmat 18.04.2012 22:07
quelle
0

Einfach gesagt, das Event-Objekt, das an einen Handler übergeben wird, enthält Details über das Event. Zum Beispiel enthält ein KeyboardEvent Informationen über die gedrückte Taste, das entsprechende Zeichen und eine beliebige Zahl Modifier-Tasten (alt, shift, control, meta), die gedrückt gehalten wurden.

  

Versucht der Event-Handler, ein Event vor der Zuweisung zu übergeben oder?

Der Handler ist Ihre Funktion, also ist es der Empfänger von event , nicht der Passer.

  • Der Event-Handler ist gebunden, wenn Sie ihn der onclick -Eigenschaft des Elements zuweisen (oder indem Sie addEventListener aufrufen. , die moderne, bevorzugte Methode, die vor dem Handler aufgerufen wird.
  • Das Event-Objekt wird übergeben, wenn der Handler aufgerufen wird, wenn das Ereignis ausgelöst wird.

Wenn also ein Benutzer auf #button_1 klickt, wird ein "click" -Ereignis ausgelöst, das auf den Button klickt, der den "click" -Handler der Schaltfläche aufruft, der ein MouseEvent .

Weitere Informationen finden Sie unter ereignisgesteuerte Programmierung .

    
outis 18.04.2012 22:12
quelle
0

Um den anderen Antworten und Kommentaren hinzuzufügen, funktioniert Ihr Code nicht mit IE. Für browserübergreifende Funktionen müssen Sie das Vorhandensein des ersten Arguments testen:

%Vor%     
ron tornambe 18.04.2012 22:20
quelle