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('test_p').addEventListener('click', function () { console.log('p'); },true) document.getElementById('test_button').addEventListener('click', function(){ console.log('test1'); },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