绑定事件各种方法之间的异同点

js中常用的绑定事件三种方法：1、直接在指定元素上绑定回调函数 <button id="btn" onclick="clickBtn()">click me</button>2、JS获取DOM元素对象后，对onclick属性赋值，绑定事件：document.getElementById('btn').onclick=clickBtn;3、JS获取DOM对象后，调用对象的addEventListener函数绑定事件：document.getElementById('btn').addEventListener('click',clickBtn)。轮到jq:如果是一个普通事件绑定：1.如果只是简单的绑定一个事件，可以直接写在行内，点击执行一个函数，例如 <button onclick="alert('点我啊!')">点我啊</button>2.也可以设置一个id 例如<button id="btn">点我啊</button><br>$('#btn').click(function(){})3.还可以写成这种格式，点击执行函数，但是函数写在外面，例如  btn1.onclick = demo; function demo(){ alert('打你干吗?'); }其实以上三种本质应该是一种，只是形式不一样。对于多事件的绑定，我用的最多的就是on() 和 bind(),一下介绍一下它们的区别：on的基本语法：on(events,[selector],[data],fn)events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。data:当一个事件被触发时要传递event.data给事件处理函数。fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。如果只是一个简单的事件绑定如 $('button').on('click',function(){}); 与bind()无二样，与以上的几种方式也没有太多的区别如果是多个事件绑定到一个函数，或则多个事件绑定到多个函数，就需要用到on了：多个事件一个函数：$(document).ready(function(){  $("p").on("mouseover mouseout",function(){   alert("多个事件一个函数");  });});多个事件绑定不同的函数$(document).ready(function(){  $("p").on({    mouseover:function(){$("body").css("background-color","lightgray");},      mouseout:function(){$("body").css("background-color","lightblue");},     click:function(){$("body").css("background-color","yellow");}    });});bind的基本语法：bind(type,[data],fn)type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。data:作为event.data属性值传递给事件对象的额外数据对象fn:绑定到每个匹配元素的事件上面的处理函数on的第二个参数可以阻止一些情况下的冒泡，原理简单说就是用选择器来精确到匹配到你想执行函数的那个元素,而bind()就没有这个参数，因此在使用bind()时很可能产生冒泡。实际上，bind() live() delegate()都是通过.on()来实现的，不过日常工作中还是.on()使用最多。延伸：jquery中bind()、live()、delegate()、on()方法之间的异同点：相同点：　　1.都支持单元素多事件的绑定；空格相隔方式或者大括号替代方式;　　2.均是通过事件冒泡方式，将事件传递到document进行事件的响应；比较和联系:1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；2.bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以用来代替live()函数，live()函数在1.9版本已经删除；3.live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些；4.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；