元素綁定事件幾種方式

一、元素綁定事件幾種方式（Js方式）

1：HTML中添加onclick

<button id="vv" onclick="myfunction()" >哈哈</button>

2：JS中定義函數綁定事件！（寫法一）

var funcc = function () {
  alert('我愛編程')
  }
var aa = document.getElementById('vv')
aa.onclick = funcc

3：直接定義函數與內容（寫法二）

document.getElementById('vv').onclick = function () {
  alert('hasssshhaa ')
  }

4：利用addEventListener

document.getElementById('vv').addEventListener('click',funcc);
//或者：
document.getElementById('vv').addEventListener('click',function () {
  alert('hahah')
})

<div id="btn" onclick="clickone()" onclick="clicktwo()"></div> 
<script>
　　　function clickone(){ alert("hello"); } //執行這個
　　　function clicktwo(){ alert("world!"); }
</script>

<div id="btn"></div>
<script>
　document.getElementById("btn").onclick = function（）{ alert("hello"); }
　document.getElementById("btn").onclick = function（）{ alert("world"); } //執行這個
</script>

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

二、元素綁定事件幾種方式（Jq方式）

1. 簡單事件綁定：

這種綁定事件方式不會重疊（使用場景，場景：涉及dom操作-用戶觸發，這種情況一般dom都會加載完畢，沒有影響，但是圖片的長時間加載情況下，用戶點擊則出問題，Dom的操作用戶觸發。）

$(document).click(function () {
    alert(1);
})

//可以寫這種形式（使用場景，通用方法，場景：涉及dom操作-自動觸發則使用，必須dom加載完畢-建議采納推薦此方法-沒有什么方法是寫在$(fu(){})）解決不了的。

$(function(){
   $(document).click(function () {
        alert(1);
    })
});

但是有弊端，是我的表格數據分頁有圖片，第一頁的可以，當我異步刷新表格后，無效。

2.bind方式（不推薦，1.7以后的jQuery版本被on取代）

 $(document).bind("click mouseenter",function () {
    alert(1);
 })

比簡單事件綁定方式的優勢：
可以同時綁定多個事件，比如：bind(“mouseenter mouseleave”, function(){})
缺點：要綁定事件的元素必須存在文檔中。

3. delegate方式（特點：性能高，支持動態創建的元素）

與前兩種方式最大的優勢：減少事件綁定次數提高效率，支持動態創建出來的元素綁定事件！

$(document).delegate(".box","click",function () {
      alert(1);
})

4. on方式（最現代的方式，兼容zepto(移動端類似jQuery的一個庫)，強烈建議使用的方式）（重點）

$(document).on("click mouseenter",".box",{"name":111},function () {
    alert(event.data.name);
});
$(".box").on("click",{},function (e) {
    e.data
})