元素绑定事件几种方式

一、元素绑定事件几种方式（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
})