Einführung in verschiedene Methoden zum Binden von Klickereignissen an in HTML

Es gibt drei Möglichkeiten, Ereignisse an Schaltflächen in HTML zu binden.

Zum Beispiel die folgenden Tags:

<button type="submit" id="btn_submit"> submit </button>

1. Verwenden Sie jquery zum Binden

$('#btn_submit').click(function(){
});

2. Verwenden Sie die native JS-Bindung (Hinweis: Internet Explorer 8 und frühere IE-Versionen unterstützen die Methode addEventListener() nicht, Opera 7.0 und Opera früher auch nicht Unterstützt. Diese Art von Browserversion muss die Methode attachEvent() verwenden, um Ereignisse )

document.getElementById("#btn_submit").addEventListener(‘click’, function(){
}, false);

Ergänzung: Der dritte Parameter von addEventListener wird verwendet, um das Ereignismodell zu bestimmen. Wenn sowohl das übergeordnete Element als auch das untergeordnete Element an das Ereignis gebunden sind, bestimmt dieser Parameter, welches Ereignis zuerst ausgelöst wird: Das heißt, das an das untergeordnete Element gebundene Ereignis reagiert zuerst auf das an das übergeordnete Element gebundene Ereignis. True fragt nach dem Erfassungsereignismodell, das der Ausführungsreihenfolge des Bubbling-Ereignismodells entgegengesetzt ist, z. B.:

<p id="test_p">   
<button type="button" value ="测试事件顺序" name="测试事件顺序" id="test_button">测试事件顺序</button></p>
document.getElementById(&#39;test_p&#39;).addEventListener(&#39;click&#39;, function () {        
console.log(&#39;p&#39;);    
},true)    
document.getElementById(&#39;test_button&#39;).addEventListener(&#39;click&#39;, function(){        
console.log(&#39;test1&#39;);    
},false);

In diesem Beispiel ist das Ereignismodell ein Erfassungsmodell. Es führt zuerst das p-Ereignis und dann das Schaltflächenereignis aus. Hier ist etwas zu beachten: Was bestimmt das Das Ereignismodell ist der dritte Parameter, der übergeben wird, wenn das übergeordnete Element das Ereignis bindet, z. B. die Schaltflächenbindung im obigen Beispiel. Der dritte im Ereignis übergebene Parameter hat keine Auswirkung, es sei denn, er enthält untergeordnete Elemente.

3. Verwenden Sie die Onclick-Bindung direkt im Button-Tag

<button type="submit" id="btn_submit" onclick="btnAction()"> submit </button>

und definieren Sie sie dann im 3f1c4e4b6b16bbbd69b2ee476dc4f83a Tag btnAtion-Methode

<script>        
function btnAction()        { }
</script>

Vergleich:

1. Verwendung Jquery-Bindung, der Code ist prägnant und einfach zu verwenden. Die Ereignisbindungsmethode ist die Anhängebindung, dh es werden so viele Methoden wie gebunden ausgeführt.

Unter der Bedingung der Einzelbindung ist der Geschwindigkeitsunterschied nicht groß, da die unterste Ebene von jQuery tatsächlich in js implementiert ist. Zumindest wird der „Bindungs“-Schritt nicht zu einem Geschwindigkeitsengpass werden, es sei denn, er ist auf der Seite gebunden. Das Ereignis enthält mehr als Zehntausende Elemente, andernfalls besteht kein Grund zur Sorge Die Reaktionsgeschwindigkeit ist einfach immer noch sehr schnell.

Also bedeutet aus Wartungssicht, „kleine Programme“ mit weniger strengen Anforderungen wie Auslastung durchzuführen. Es wird empfohlen, die jQuery-Bindung zu verwenden, die einfach, klar und am einfachsten zu warten ist.

2. Im Vergleich zu jquery ist die Codemenge bei Verwendung von nativem js etwas größer, ermöglicht es den Benutzern jedoch, die Details der Ereignisbindung besser zu verstehen diejenigen, die mit nativem js vertraut sind. Es wird für Entwickler empfohlen .

3. Bei Verwendung der Onclick-Tag-Bindung ist die Codemenge nicht groß, aber das HTML-Frontend und das JS-Frontend werden gemischt, was nicht einfach ist pflegen. Grundsätzlich kann HTML-Code nur die Struktur einer Webseite widerspiegeln und bestimmte Verhaltensweisen sollten mithilfe von Javascript-Code gebunden werden.

Wenn Sie das Onclick-Ereignis verwenden, um js in HTML zu mischen, führt dies dazu, dass die Arbeit von HTML-Front- End- und js-Front-End-Mischung Zusammengenommen ist es schwierig, Arbeitsaufgaben zu trennen, was die Wartung erschwert. Dieser Ansatz eignet sich gut für temporäres Debuggen, sollte er jedoch nicht im offiziellen fertigen Produkt erscheinen,

Es wird daher nicht empfohlen, das onclick-Tag zum Binden von Ereignissen zu verwenden.

Das obige ist der detaillierte Inhalt vonEinführung in verschiedene Methoden zum Binden von Klickereignissen an in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!