js事件绑定的几种方式

在JavaScript中，有三种常用的绑定事件的方法：

1. 在DOM元素中直接绑定；
2. 在JavaScript代码中绑定；
3. 绑定事件监听函数

一. 在DOM元素中直接绑定

这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：
    onXXX="JavaScript Code"

其中：

• onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
• JavaScript Code 为处理事件的JavaScript代码，一般是函数。

例如，单击一个按钮，弹出警告框的代码有如下两种写法。

1.原生函数

<input  οnclick="alert('警告，不要乱点！！！')"  type="button"  value="点我试试" />  

2.调用自定义函数

<input  οnclick="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").οnclick=function(){  
    alert(this.getAttribute("type"));  //  this 指当前发生事件的HTML元素，这里是<div>标签  
}  
</script>  

注： 给一个事件绑定多个操作只会执行最后一个

例： document.getElementById("btn1").οnclick=function(){

alert("method111");

};

document.getElementById("btn1").οnclick=function(){

alert("method222");

};

document.getElementById("btn1").οnclick=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("又是一个警告框");
}