简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

Einführung in verschiedene Methoden zum Binden von Klickereignissen an

黄舟
Freigeben： 2017-07-27 14:09:18
Original
38348 Leute haben es durchsucht

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>
Nach dem Login kopieren

1. Verwenden Sie jquery zum Binden 

$(&#39;#btn_submit&#39;).click(function(){
});
Nach dem Login kopieren

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);
Nach dem Login kopieren
<🎜 hinzuzufügen >

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);
Nach dem Login kopieren

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>
Nach dem Login kopieren

und definieren Sie sie dann im

Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！