js 绑定事件函数的方法
12月25日 21:14:14 阅读数：687 要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。在JavaScript中，有三种常用的绑定事件的方法： 在DOM元素中直接绑定；在JavaScript代码中绑定；绑定事件监听函数。
一. 在DOM元素中直接绑定
这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：onXXX="JavaScript Code"
其中： onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。JavaScript Code 为处理事件的JavaScript代码，一般是函数。
例如，单击一个按钮，弹出警告框的代码有如下两种写法。
1. 原生函数
2. 自定义函数 <input onclick="myAlert()"type="button"value="点击我，弹出警告框"/><script type="text/javascript">functionmyAlert(){alert("谢谢支持");}</script><input onclick="alert('谢谢支持')"type="button"value="点击我，弹出警告框"/>实例演示：
二.在JavaScript代码中绑定
在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。在JavaScript代码中绑定事件的语法为：
elementObject.onXXX=function(){
// 事件处理代码
}
其中： elementObject 为DOM对象，即DOM元素。onXXX 为事件名称。
例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：
addEventListener()函数语法： elementObject.addEventListener(eventName,handle,useCapture); attachEvent()函数语法： elementObject.attachEvent(eventName,handle); 注意：事件句柄函数是指“ 函数名 ”，不能带小括号。 addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。 下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持： functionaddEvent(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;}}}<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() 来绑定事件监听函数。
这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句，避免浏览器出现错误提示。
例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出警告框：
addEvent(document.getElementById("demo"),"click",myAlert);functionmyAlert(){alert("又是一个警告框");} 实例演示：
示例代码：<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script type="text/javascript">
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
(function(i){
lis[i].addEventListener('click',function(e){
alert(i+1);
},false)
})(i);
}
