HTML でクリックイベントを <button> にバインドするいくつかの方法の紹介-htmlチュートリアル-php.cn

HTML でイベントをボタンにバインドするには 3 つの方法があります。

たとえば、次のタグ:

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

ログイン後にコピー

1. バインディングに jquery を使用します

$(&#39;#btn_submit&#39;).click(function(){
});

ログイン後にコピー

2. ネイティブ JS バインディングを使用します (注: Internet Explorer 8 以前の IE バージョンはサポートされていません) addEventListener() メソッドは、Opera 7.0 以前のバージョンの Opera ではサポートされていません。これらのブラウザバージョンでは、attachEvent() メソッドを使用してイベントを追加する必要があります)

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

ログイン後にコピー

追加: の 3 番目のパラメータaddEventListener イベントモデルを決定するために使用されます。親要素と子要素の両方がイベントにバインドされている場合、このパラメーターはどちらのイベントが最初にトリガーされるかを決定します。False はバブリングイベントモデル、つまり、子にバインドされたイベントです。要素が最初に応答し、親要素にバインドされたイベントが最初に応答します。イベントの後に対応して、true はバブリングイベントモデルの実行順序とは逆に、次のように要求します。この例のイベントモデルはキャプチャモデルであり、最初に p イベントを実行し、次にボタンイベントを実行します。イベントモデルを決定するのは、たとえば、親要素がイベントをバインドするときに渡される 3 番目のパラメーターです。上記の例では、ボタンがイベントをバインドするときに渡される 3 番目のパラメーターは、子要素も含まれていない限り、効果がありません。

3. ボタンタグで onclick バインディングを直接使用します

<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);

ログイン後にコピー

次に、

人気のチュートリアル

詳細>