検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML でクリック イベントを

HTML でクリック イベントを

黄舟
黄舟オリジナル
2017-07-27 14:09:1838468ブラウズ

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

次に、