首頁 >web前端 >html教學 >html中

html中

黄舟
黄舟原創
2017-07-27 14:09:1838469瀏覽

HTML中為button綁定事件的方式有三種。

例如以下標籤:

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

一、使用jquery進行綁定

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

#二、使用原生js綁定,(注意:Internet Explorer 8 及更早IE版本不支援addEventListener() 方法,Opera 7.0 及Opera 更早版本也不支援。這類瀏覽器版本要使用 attachEvent() 方法來新增事件

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

補充:addEventListener的第三個參數是用來決定事件模型的,當父元素和子元素都綁定了事件時,這個參數決定先觸發哪個事件,false為冒泡事件模型:即子元素綁定的事件先響應,父元素綁定定的事件後相應,true問捕獲事件模型,與冒泡事件模型執行順序相反,如:

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

這個例子的事件模型是捕獲模型,會先執行p的事件再執行button的事件,這裡有個需要注意的地方:決定事件模型的是父元素綁定事件時傳的第三個參數,如上例中button綁定事件時傳的第三個參數是不起作用的,除非它又包含了子元素。

三、直接在button標籤中使用onclick綁定

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

然後在3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤中定義btnAtion的方法

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

#比較:

1、使用jquery綁定,程式碼簡潔,使用方便,事件綁定方式為追加綁定,也就是綁定多少個方法就執行多少個方法。

在單一綁定的條件下,由於jQuery底層其實也是js實現,所以速度差異並不大。至少「綁定」這個環節並不會成為

#速度的瓶頸,除非頁面上綁定事件的元素超過上萬個,否則反應速度就不必糾結了,只做個事件綁定還是很快的。

所以在做負載等要求不那麼嚴格的“小程式”,從維護的角度上,建議用jQuery綁定,簡單清楚,最容易維護。

2、使用原生js與jquery相比的話碼量稍大,但能讓人進一步了解事件綁定的細節,對於熟悉原生js的開發者來說是值得推薦的

3、使用onclick標籤綁定,程式碼量不大,但是html前端和js前端混在一起,不容易維護。

原則上HTML程式碼只能體現網頁的結構,具體的行為應該使用javascript程式碼來綁定。

如果在#HTML中用onclick事件混雜js,會導致html前端和js前端的工作混在了一起,難以分離工作任務,

#進而難以維護。這種做法暫時調試可以,但如果正式成品中不應該出現,

所以不建議使用onclick標籤方式進行綁定事件。

以上是html中

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn