jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下：jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别
jQuery 事件绑定
jQuery 中提供了四种事件监听绑定方式，分别是 bind、live、delegate、on，
对应的解除监听的函数分别是 unbind、die、undelegate、off。
live、delegate 不多用，在Jquery1.7中已经移除，这里不多说
重点介绍 bind、on
bind(event,[data],function)
bind 是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下：
event：事件类型，如 click、change、mouseover 等
data：传入监听函数的参数，通过 event.data 取到。可选
function：监听函数，可传入event对象，这里的event是 jQuery 封装的 event 对象，与原生的event对象有区别，使用时需要注意
使用：$("#div li").bind("click",myFun);
on(event,childSelector,data,function)
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。最常用的一种
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。
event：必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector：可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data：可选。规定传递到函数的额外数据。
function：可选。规定当事件发生时运行的函数。
使用：$(selector).on(event,childSelector,data,function);
.click()、.trigger() 也有事件绑定效果
JavaScript 原生事件绑定
1.在DOM元素中直接绑定：这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件
2.在JavaScript代码中onXXX绑定：在JavaScript代码中绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。
3.绑定事件监听函数：绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。
一. 在DOM元素中直接绑定
1. 原生函数
1 <input onclick="alert('谢谢支持')" type="button" value="点我" />
2. 自定义函数
1 <input onclick="myAlert()" type="button" value="点我" /> 2 3 <script type="text/javascript"> 4 5 function myAlert(){ 6 7 alert("谢谢支持"); 8 9 } 10 11 </script>
二. 在JavaScript代码中onXXX绑定
在JavaScript代码中绑定事件的语法为：
elementObject.onXXX=function(){
// 事件处理代码
}
其中：
- elementObject 为DOM对象，即DOM元素。
- onXXX 为事件名称。
例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：
1 <input id="demo" type="button" value="点击我，显示 type 属性" /> 2 3 <script type="text/javascript"> 4 5 document.getElementById("demo").onclick=function(){ 6 7 alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素，这里是<div>标签 8 9 } 10 </script>
三. 绑定事件监听函数
addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);
| 参数 | 说明 |
|---|---|
| elementObject | DOM对象（即DOM元素）。 |
| eventName | 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。 |
| handle | 事件句柄函数，即用来处理事件的函数。 |
| useCapture | Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。 |
attachEvent()函数语法:（兼容IE）
elementObject.attachEvent(eventName,handle);
| 参数 | 说明 |
|---|---|
| elementObject | DOM对象（即DOM元素）。 |
| eventName | 事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。 |
| handle | 事件句柄函数，即用来处理事件的函数。 |
注意：事件句柄函数是指“ 函数名 ”，不能带小括号。
addEventListener() 是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；
但是，IE8.0及其以下版本不支持该方法，它使用 attachEvent() 来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。
下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：
1 function addEvent(obj,type,handle){ 2 3 try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本 4 5 obj.addEventListener(type,handle,false); 6 7 }catch(e){ 8 9 try{ // IE8.0及其以下版本 10 11 obj.attachEvent('on' + type,handle); 12 13 }catch(e){ // 早期浏览器 14 15 obj['on' + type] = handle; 16 17 } 18 19 } 20 21 }
这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句，避免浏览器出现错误提示。
例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出对话框：
1 var obj = document.getElementById("demo"); 2 addEvent(obj ,"click",myAlert); 3 4 function myAlert(){ 5 6 alert("我是对话框"); 7 8 }
jQuery 事件绑定和 JavaScript 事件绑定的区别
jQuery 中的事件绑定具有叠加性，JavaScript 的事件绑定则是可覆盖的。
看一下示例代码：
1 /* jQuery 绑定事件 */ 2 $(".cnd").click(function(){ 3 console.log("first")} 4 ); 5 $(".cnd").click(function(){ 6 console.log("second")} 7 ); 8 9 $(".cnd").click(function(){ 10 console.log("3rd")} 11 ); 12 13 /* js 绑定事件 */ 14 var cm2 = document.getElementById("me2"); 15 cm2.onclick=function(){ 16 console.log("first"); 17 }; 18 cm2.onclick=function(){ 19 console.log("second"); 20 }; 21 cm2.onclick=function(){ 22 console.log("3rd"); 23 };
执行 jQuery 的 .cnd 点击事件，控制台打印的是：
执行 js 的 cm2 点击事件，控制台打印的是：
可以发现：
使用 jQuery 的事件绑定方法，对同一个元素的 click 事件先后绑定了三个处理函数，结果按顺序都输出了，说明了 jQuery 的事件处理函数是叠加的；
而使用 JavaScript 原生的事件绑定，可以发现只执行了最后一个相同的绑定事件，后面绑定的事件处理函数覆盖了前面的事件处理函数。
