事件綁定

HTML事件處理：

<input onclick="fn()" type="button" value="按鈕"/>

<script>
function fn(){
    alert(1);
}
</script>

DEMO 0級事件處理：

<input id="btn" type="button" value="按鈕"/>

<script>
    var oBtn = document.getElementById('btn');

    //添加事件
    oBtn.onclick = function (){
        alert(1);
    };

    //移除事件
    oBtn.onclick = null;
</script>

DEMO 0級事件處理的缺陷，添加多個相同事件只能執行一個，所以有了DEMO2級事件處理；

DEMO2級事件處理：

//標準：addEventListener、removeEventListener
//IE：attachEvent、detachEvent

//兼容處理：
//添加事件綁定
function addEvent(o, ev, fn){
    if(o.addEventListener){
        o.addEventListener(ev, fn, false);
    }else if(o.attachEvent){
        o.attachEvent('on'+ev, function(){
            fn.call(o); // IE兼容處理
        });
    }else{
        o['on'+ev] = fn;
    }
}
//移除事件綁定
function removeEvent(o, ev, fn){
    if(o.removeEventListener){
        o.removeEventListener(ev, fn, false);
    }else if(o.detachEvent){
        o.detachEvent('on'+ev, fn);
    }else{
        o['on'+ev] = null;
    }
}

 IE+標準：事件冒泡(從內到外)：

<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>

<script>
//事件冒泡：當一個元素觸發某事件時，同時會把事件傳遞給父級（從內到外）
window.onload = function(){
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');

    function fn(){
        alert(this.id);
    };

    oDiv1.onclick = fn;
    oDiv2.onclick = fn;
    oDiv3.onclick = fn;
};
</script>

標準：事件捕獲(從外到內)：

<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>

<script>
//事件捕獲：當一個元素觸發某事件時，同時會把事件傳遞給子級（從外到內）
window.onload = function(){
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');

    function fn(){
        alert(this.id);
    };

    //true：捕獲， false:冒泡
    oDiv1.addEventListener('click', fn, true);
    oDiv2.addEventListener('click', fn, true);
    oDiv3.addEventListener('click', fn, true);
};
</script>

標準：事件冒泡+捕獲（先捕獲後冒泡）：

<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>

<script>
//先捕獲後冒泡
window.onload = function(){
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');

    //true：捕獲， false:冒泡
    oDiv1.addEventListener('click', function(){
        alert(1);
    }, false);
    oDiv1.addEventListener('click', function(){
        alert(2);
    }, true);
    oDiv3.addEventListener('click', function(){
        alert(3);
    }, false);
};
</script>

 事件對象跨瀏覽器兼容：

//獲取事件對象
function getEvent(event){
    return event ? event : window.event;
}

//獲取目標
function getTarget(event){
    return event.target || event.srcElement;
}

//阻止冒泡
function stopPropagation(event){
    if(event.stopPropagation){ //W3C
        event.stopPropagation();
    }else{ //IE
        event.cancelBubble = true;
    }
}

//阻止默認行爲
function preventDefault(event){
    if(event.preventDefault){ //W3C
        event.preventDefault();
    }else{ //IE
        event.returnValue = false;
    }
}