Analysieren Sie den Unterschied zwischen den Prinzipien und der Verwendung von Js on und addEventListener

1. Stellen Sie zunächst die Verwendung der beiden vor:

1. Verwendung von on: Nehmen Sie onclick als Beispiel

Erster Typ:

obj.onclick = function(){
//do something..
}

Zweiter Typ:

obj.onclick= fn;
function fn (){
//do something...
}

Dritte Methode: Wenn die Funktion fn Parameter hat, verwenden Sie eine anonyme Funktion, um Parameter zu übergeben:

obj.onclick = function(){fn(param)};
function fn(param){
//do something..
}

kann nicht so geschrieben werden: Falsche Schreibweise: obj.onclick= fn(param):

Da die auf diese Weise geschriebene Funktion sofort ausgeführt wird und nicht auf das Auslösen des Klicks wartet, achten Sie besonders auf

2. Verwendung von addEventListener:

Form:

addEventListener(event,funtionName,useCapture)

Parameter:

• Ereignis: Ereignistyp wie „Klick“
• Funktionsname: Methodenname
• useCapture( Optional): Boolescher Wert, der angibt, ob das Ereignis in der Capture- oder Bubbling-Phase ausgeführt wird.
• true – der Ereignishandler wird während der Erfassungsphase ausgeführt
• false – false – Standard. Der Event-Handler wird in der Bubbling-Phase ausgeführt

Schreiben:

Der erste Weg:

obj.addEventListener("click",function(){
//do something
}));

Der zweite Weg: Sie können die Funktion direkt schreiben Name ohne Parameter

obj.addEventListener("click",fn,fasle));
function fn(){
//do something..
}

Der dritte Typ: Wenn die Funktion Parameter hat, müssen anonyme Funktionen verwendet werden, um die Parameter zu übergeben

obj.addEventListener("click",function(){fn(parm)},false);

2 Der Unterschied zwischen den beiden

1 Das on-Ereignis wird durch das nachfolgende on-Ereignis überschrieben

Nehmen Sie onclick als Beispiel:

//obj是一个dom对象，下同//注册第一个点击事件
obj.onclick(function(){
alert("hello world");
});
//注册第二个点击事件
obj.onclick(function(){
alert("hello world too");
});

Am Ende wird es nur eine Popup-Box-Ausgabe geben:

hello world too

2.addEventListener wird nicht überschrieben.

//注册第一个点击事件
obj.addEventListener("click",function(){
alert("hello world");
}));
//注册第二个点击事件
obj.addEventListener("click",function(){
alert("hello world too");
}));

Dies wird kontinuierlich ausgegeben:

hello world
hello world too

3. AddEventListener-Hinweise:

1. Besonderer Hinweis, dass addEventListener nicht mit IE9 und niedriger kompatibel ist. Verwenden Sie attachmentEvent()

obj.attachEvent(event,funtionName);

event: event type ( muss als „onclick“ geschrieben werden. Add-on vorne, das unterscheidet sich von addEventListener)

funtionName: Methodenname (wenn Sie Parameter wünschen, müssen Sie auch anonyme Funktionen verwenden, um Parameter zu übergeben)

4. Ereignissammlung:

1. Klicken Sie auf ( Klicken)

dbclick (Doppelklick)

Mousedown (Maus nach unten)

• Mouseout (Maus nach außen)
• Mouseover (Maus nach innen)
• Mouseup (Maus nach oben)
• Mousemove (Mausbewegung)
• 2. Tastaturereignisse:
• Taste nach unten (Tastendruck)

keypress(Tastendruck)

keyup(keyup)

• 3. HTML-Ereignisse:
• load (Seite laden)
• unload (entladen der Seite)
• ändern (Inhalt ändern)
• scrollen (scrollen)
• Fokus (Fokus erhalten)
• Unschärfe (Fokus verlieren)
• 5. Zusammenfassung:

onXXX und addEventListener fügen beide Ereignis-Listener zu Dom-Elementen hinzu, damit sie entsprechende Codes und Operationen nach dem ausführen können Ereignis eintritt. Mit ihnen realisieren wir Seiten- und Benutzerinteraktion. Verwandte Lernempfehlungen:
Javascript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonAnalysieren Sie den Unterschied zwischen den Prinzipien und der Verwendung von Js on und addEventListener. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!