事件绑定的几种方式

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

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

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

一. 在DOM元素中直接绑定

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

其中：

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

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

1. 原生函数

1. <input onclick="alert('谢谢支持')" type="button" value="点击我，弹出警告框" />

实例演示：


2. 自定义函数

1. <input onclick="myAlert()" type="button" value="点击我，弹出警告框" />
2. <script type="text/javascript">
3. function myAlert(){
4. alert("谢谢支持");
5. }
6. </script>

实例演示：

二. 在JavaScript代码中绑定

注册/移除事件的三种方式

var box = document.getElementById('box');
box.onclick = function () {       

//兼容性最好，同一元素多次调用会出现覆盖问题，

//如果需要绑定多个方法则直接写在一起即可如document.getElementById('wrap').onclick = function(){a();b();}或<div id="wrap" onclick="a();b();"></div>
console.log('点击后执行');
};
box.onclick = null;                  //移除事件

box.addEventListener('click', eventCode, false);           // ie8及以下不支持,可以多次出现，不存在覆盖问题
box.removeEventListener('click', eventCode, false);      // ie8及以下不支持

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
console.log('点击后执行');
}

 

兼容代码

function addEventListener(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent){
element.attachEvent('on' + type,fn);
} else {
element['on'+type] = fn;
}
}

function removeEventListener(element, type, fn) {
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, fn);
} else {
element['on'+type] = null;
}
}

这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句，避免浏览器出现错误提示。

例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出警告框：

1. addEvent(document.getElementById("demo"),"click",myAlert);
2. function myAlert(){
3. alert("又是一个警告框");
4. }