JavaScript事件處理程序

JavaScript中的事件處理程序主要分爲3種：

• HTML事件處理程序：

    <script type="text/javascript">
    // HTML事件處理程序
    function showMessage(){
        alert("clicked!");
    };
    </script>

<button id="btn" onclick="showMessage()">click me!</button>

• DOM0級事件處理程序：　　

<button id="btn">click me!</button>

    <script type="text/javascript">
    var btn = document.getElementById("btn");
    
    // DOM0 級事件處理程序
    btn.onclick = function(){
        alert("clicked!");
    };
    </script>

• DOM2級事件處理程序：

<button id="btn">click me!</button>

    <script type="text/javascript">
    var btn = document.getElementById("btn");
    
    // DOM2級事件處理程序, 第三個參數：false表示在冒泡階段調用事件處理程序
    btn.addEventListener("click", function(){
        alert("clicked!");
    }, false);
    </script>

  

附上兼容性事件綁定函數：

function listenEvent(eventTarget, eventType, eventHandler){
    if(eventTarget.addEventListener){
        eventTarget.addEventListener(eventType, eventHandler, false);
    }
    else if(eventTarget.attachEvent){
        eventType = 'on' + eventType;
        eventTarget.attachEvent(eventType, eventHandler);
    }
    else{
        eventTarget['on' + eventType] = eventHandler;
    }
}