在JavaScript中，有三种常用的绑定事件的方法：
1.在DOM元素中直接绑定；
2.在JavaScript代码中绑定；
3.绑定事件监听函数。
一. 原生函数
<input onclick="alert('谢谢支持')" type="button" value="点击我，弹出警告框" />
或
<input onclick="myAlert()" type="button" value="点击我，弹出警告框" />
<script type="text/javascript">
function myAlert(){
alert("谢谢支持");
}
</script>
二. 在JavaScript代码中绑定
例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：
<input id="demo" type="button" value="点击我，显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").οnclick=function(){
alert(this.getAttribute("type"));
}
</script>
三. 绑定事件监听函数
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() （兼容ie8）来绑定事件监听函数。
addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);
参数说明：
elementObject： DOM对象（即DOM元素）。
eventName： 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle： 事件句柄函数，即用来处理事件的函数。
useCapture： Boolean类型，是否使用捕获，一般用false 。（默认冒泡）
attachEvent()函数语法：（不支持捕获）
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()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。
下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：
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("又是一个警告框");
}
四、自定义事件
var $ = function(el) {
return new _$(el);
};
var _$ = function(el) {
this.el = (el && el.nodeType == 1)? el: document;
};
_$.prototype = {
constructor: this,
addEvent: function(type, fn, capture) {
var el = this.el;
if (window.addEventListener) {
el.addEventListener(type, fn, capture);
var ev = document.createEvent("HTMLEvents");
ev.initEvent(type, capture || false, false);
if (!el["ev" + type]) {
el["ev" + type] = ev;
}
} else if (window.attachEvent) {
el.attachEvent("on" + type, fn);
if (isNaN(el["cu" + type])) {
// 自定义属性
el["cu" + type] = 0;
}
var fnEv = function(event) {
if (event.propertyName == "cu" + type) { fn.call(el); }
};
el.attachEvent("onpropertychange", fnEv);
if (!el["ev" + type]) {
el["ev" + type] = [fnEv];
} else {
el["ev" + type].push(fnEv);
}
}
return this;
},
fireEvent: function(type) {
var el = this.el;
if (typeof type === "string") {
if (document.dispatchEvent) {
if (el["ev" + type]) {
el.dispatchEvent(el["ev" + type]);
}
} else if (document.attachEvent) {
el["cu" + type]++;
}
}
return this;
},
removeEvent: function(type, fn, capture) {
var el = this.el;
if (window.removeEventListener) {
el.removeEventListener(type, fn, capture || false);
} else if (document.attachEvent) {
el.detachEvent("on" + type, fn);
var arrEv = el["ev" + type];
if (arrEv instanceof Array) {
for (var i=0; i<arrEv.length; i+=1) {
el.detachEvent("onpropertychange", arrEv[i]);
}
}
}
return this;
}
};
$(elImage) .addEvent("click", funClick); .addEvent("alert", funAlert1); .addEvent("alert", funAlert2);
而funClick方法中有等同下面脚本：
$(e.target).fireEvent("alert");
因此，点击图片，才会出现三个弹出框：用户点击图片 → 执行funClick → 第一个弹框 → 执行fireEvent → 触发自定义"alert"事件 → 连续两个"alert"事件弹框
当点击图片下面的按钮清除掉自定义"alert"事件后，再点击图片就只有一个弹出
