在JavaScript中，有三种常用的绑定事件的方法： 在DOM元素中直接绑定； 在JavaScript代码中绑定； 绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为： onXXX="JavaScript Code" 其中： onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。 JavaScript Code 为处理事件的JavaScript代码，一般是函数。 例如，单击一个按钮，弹出警告框的代码有如下两种写法。 1.原生函数 <input onclick="alert('警告，不要乱点！！！')" type="button" value="点我试试" /> 2.调用自定义函数 <input onclick="attention()" type="button" value="点我试试22" /> <script type="text/javascript"> function attention(){ alert("提示：这是一个警告提示"); } </script> 二. 在js代码中绑定 在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。 在JavaScript代码中绑定事件的语法为： elementObject.onXXX=function(){ // 事件处理代码 } 其中： elementObject 为DOM对象，即DOM元素。 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> 注：给一个事件绑定多个操作只会执行最后一个 例： document.getElementById("btn1").onclick=function(){ alert("method111"); }; document.getElementById("btn1").onclick=function(){ alert("method222"); }; document.getElementById("btn1").onclick=function(){ alert("method333"); }; 只会弹出“method333”； 三. 绑定事件监听函数 绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。 注：可给一个事件绑定多个操作 addEventListener()函数语法： elementObject.addEventListener(eventName,handle,useCapture); 参数 说明 elementObject DOM对象（即DOM元素）。 eventName 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。 handle 事件句柄函数，即用来处理事件的函数。 useCapture Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。 例： var btn1Obj = document.getElementById("btn1"); //element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener("click",method1,false); btn1Obj.addEventListener("click",method2,false); btn1Obj.addEventListener("click",method3,false); 执行顺序为method1->method2->method3 attachEvent()函数语法： elementObject.attachEvent(eventName,handle); 参数 说明 elementObject DOM对象（即DOM元素）。 eventName 事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。 handle 事件句柄函数，即用来处理事件的函数。 例： var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function); btn1Obj.attachEvent("onclick",method1); btn1Obj.attachEvent("onclick",method2); btn1Obj.attachEvent("onclick",method3); 执行顺序为method3->method2->method1 注意：事件句柄函数是指“ 函数名 ”，不能带小括号。 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("又是一个警告框"); }
在JavaScript中，有三种常用的绑定事件的方法：
- 在DOM元素中直接绑定；
- 在JavaScript代码中绑定；
- 绑定事件监听函数
一. 在DOM元素中直接绑定
这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：
onXXX="JavaScript Code"
其中：
- onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
- JavaScript Code 为处理事件的JavaScript代码，一般是函数。
例如，单击一个按钮，弹出警告框的代码有如下两种写法。
1.原生函数
<input onclick="alert('警告，不要乱点！！！')" type="button" value="点我试试" /> 2.调用自定义函数
二. 在js代码中绑定
在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。
在JavaScript代码中绑定事件的语法为：
elementObject.onXXX=function(){
// 事件处理代码
}
其中：
- elementObject 为DOM对象，即DOM元素。
- onXXX 为事件名称。
例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：
注：给一个事件绑定多个操作只会执行最后一个
例： document.getElementById("btn1").onclick=function(){
alert("method111");
};
document.getElementById("btn1").onclick=function(){
alert("method222");
};
document.getElementById("btn1").onclick=function(){
alert("method333");
};
只会弹出“method333”；
三. 绑定事件监听函数
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。
注：可给一个事件绑定多个操作
addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);
| 参数 | 说明 |
|---|---|
| elementObject | DOM对象（即DOM元素）。 |
| eventName | 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。 |
| handle | 事件句柄函数，即用来处理事件的函数。 |
| useCapture | Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。 |
例：
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
执行顺序为method1->method2->method3
attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);
| 参数 | 说明 |
|---|---|
| elementObject | DOM对象（即DOM元素）。 |
| eventName | 事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。 |
| handle | 事件句柄函数，即用来处理事件的函数。 |
例：
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
执行顺序为method3->method2->method1
注意：事件句柄函数是指“ 函数名 ”，不能带小括号。
addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。
下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：
这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句，避免浏览器出现错误提示。
例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出警告框：
addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){
alert("又是一个警告框");
}
动态绑定：
jquery给动态添加的dom元素绑定事件
$('input').click(function () {
//处理代码
});
这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定，对于页面中动态添加的元素，在页面加载完成后添加的，因此页面加载时无法给其绑定事件处理函数，好在jquery提供了on方法，如为动态添加的元素附加单击事件。对于jquery1.7+的版本直接用on方法， $('body').append('<p id="pid"></p>'); $('#pid').on('click',function(){ //业务逻辑 }); 对于早于1.7的版本用live方法. $('body').append('<p id="pid"></p>'); $('pid').live('click',function(){ //业务逻辑 });