本文實例講述了JavaScript三種綁定事件方式及相互之間的區別。分享給大家供大家參考，具體如下：
JavaScript三種綁定事件的方式：
1.
<div id="btn" onclick="clickone()"></div> //直接在DOM里綁定事件<script>function clickone(){ alert("hello"); }</script>2.
<div id="btn"></div><script>document.getElementById("btn").onclick = function（）{ alert("hello"); } //腳本里面綁定</script>3.
<div id="btn"></div><script>document.getElementById("btn").addeventlistener("click",clickone,false); //通過偵聽事件處理相應的函數function clickone(){ alert("hello"); }</script>那么問題來了，1 和 2 的方式是我們經常用到的，那么既然已經有兩種綁定事件的方法為什么還要有第三種呢？答案是這樣的：
用 "addeventlistener" 可以綁定多次同一個事件，且都會執行，而在DOM結構如果綁定兩個 "onclick" 事件，只會執行第一個；在腳本通過匿名函數的方式綁定的只會執行最后一個事件。
1.
<div id="btn" onclick="clickone()" onclick="clicktwo()"></div><script>function clickone(){ alert("hello"); } //執行這個function clicktwo(){ alert("world!"); }</script>2.
<div id="btn"></div><script>document.getElementById("btn").onclick = function（）{ alert("hello"); }document.getElementById("btn").onclick = function（）{ alert("world"); } //執行這個</script>3.
<div id="btn"></div><script>document.getElementById("btn").addeventlistener("click",clickone,false);function clickone(){ alert("hello"); } //先執行document.getElementById("btn").addeventlistener("click",clicktwo,false);function clicktwo(){ alert("world"); } //后執行</script>以上；可根據場景靈活選擇。
PS:關于javascript常用事件及相關說明還可參考本站在線工具：
javascript事件與功能說明大全：
http://tools.VeVB.COm/table/javascript_event
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript時間與日期操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
