Dom绑定事件三种方式及自定义事件

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

在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代码中绑定

在JavaScript代码中（即

例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：
<input id="demo" type="button" value="点击我，显示 type 属性" />
<script type="text/javascript">
    document.getElementById("demo").onclick=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"事件后，再点击图片就只有一个弹出

参考：张鑫旭——自定义事件