关于JavaScript的事件绑定
js事件绑定的几种方式
JavaScript中有三种常用的绑定事件方法：
1. 在DOM元素中直接绑定；
2. 在JavaScript代码中绑定；
3. 绑定事件佳妮婷函数。
一、在DOM元素中直接绑定
这里的DOM元素指HTML标签。JavaScript支持在标签中直接绑定事件，语法：
onXXX = "JavaScript Code"
其中：
1)、onXXX为事件名称。如：鼠标单击事件onclick，鼠标双击事件ondouble，鼠标移入事件onmouseover，鼠标移出事件onmouseout等。
2)、JavaScript Code为处理事件的JavaScript代码，一般是函数。
① 原生函数
<input onclick="alert('谢谢支持')" type="button" value="点击我，弹出警告框" />
② 自定义函数
<input onclick="myAlert()" type="button" value="点击我，弹出警告框" /> <script type="text/javascript"> function myAlert(){ alert("谢谢支持"); } </script>
二、在<script>元素中直接绑定
在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。
在JavaScript代码中绑定事件的语法为：
elementObject.onXXX=function(){
// 事件处理代码
}
其中：
1)、elementObject 为DOM对象，即DOM元素。
2)、onXXX 为事件名称。
例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：
<input id="demo" type="button" value="点击我，显示 type 属性" /> <script type="text/javascript"> document.getElementById("demo").onclick=function(){ alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素，这里是<div>标签 } </script>
三、绑定事件监听函数
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。
1、addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);
1)、elementObject：DOM对象（即DOM元素）。
2)、eventName：事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
3)、handle：事件句柄函数，即用来处理事件的函数。
4)、useCapture：Boolean类型，是否使用捕获，一般用false 。
2、attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);
1)、elementObject：DOM对象（即DOM元素）。
2)、eventName：事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
3)、handle：事件句柄函数，即用来处理事件的函数。
注意：事件句柄函数是指“ 函数名 ”，不能带小括号。
addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。
下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：
function addEvent(obj,type,handle){ try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本 obj.addEventListener(type,handle,false); }catch(e){ try{ // IE8.0及其以下版本 obj.attachEvent('on' + type,handle); }catch(e){ // 早期浏览器 obj['on' + type] = handle; } } }
这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句，避免浏览器出现错误提示。
例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出警告框：
addEvent(document.getElementById("demo"),"click",myAlert); function myAlert(){ alert("又是一个警告框"); }
以上三种js绑定事件方式示例：
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>
用“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>
jQuery事件绑定
一、.bind()、.live()、.delegate()之间的区别
1) .bind()
$('a').bind('click', function() {alert('That tickles') });
这是最简单的绑定方法。jQuery扫描文档找出所有的$('a')元素，并把alert函数绑定到每个元素的click事件上。
2) .live()
$('a').live('click',function(){alert('That tickles!)});
jQuery把alert函数绑定到$(document)元素上，并使用‘click’和‘a’作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与‘这一CSS选择器是否匹配，如果都是的话，则执行函数。
live方法还可以被绑定到具体的元素（或context）而不是document上，像这样：
$('a',$('#container')[0]).live(...);
3) .delegate()
$('#container').delegate('a','click',function(){alert(”That tickles!")});
jQuery扫描文档查找$('#container')，并使用click事件和‘a'这一CSS选择器作为参数把alert函数绑定到$('#container')上。任何时候只要有事件冒泡到$('#container')上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CSS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。
可以注意到，这一过程与.live()类似，但是其把处理程序绑定到具体的元素而非document这一根上。
为什么.delegate()要比.live()好用？
基于几个原因，人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子：
$('a').live('click', function() { blah() }); // 或者 $(document).delegate('a', 'click', function() { blah() });
停止传播
最后一个我想做的提醒与事件传播有关。通常情况下，我们可以通过使用这样的事件方法来终止处理函数的执行：
$('a').bind('click', function(e) { e.preventDefault(); // 或者 e.stopPropagation(); });
二、比较和联系:
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.9-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；
三、推荐使用.on()方法绑定，原因有两点：
1.on()方法可以绑定动态添加到页面元素的事件
比如动态添加到页面的DOM元素，用.on()方法绑定的事件不需要关心注册该事件的元素何时被添加进来，也不需要重复绑定。有的同学可能习惯于用.bind()、.live()或.delegate()，查看源码就会发现，它们实际上调用的都是.on()方法，并且.live()方法在jQuery1.9版本已经被移除。
bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }, live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }, delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); }
2.on()方法绑定事件可以提升效率
测试：
假设页面添加了5000个li，用chrome开发者工具Profiles测试页面载入时间。
普通
$('li').click(function(){ console.log(this) });
普通绑定相当于在5000li上面分别注册click事件，内存占用约4.2M，绑定时间约为72ms。
.on()绑定
$(document).on('click', 'li', function(){ console.log(this) })
.on()绑定利用事件代理，只在document上注册了一个click事件，内存占用约2.2M，绑定时间约为1ms。
tip:如果你需要移除on()所绑定的方法，可以使用off()方法处理。
