js事件处理程序

下面用几行代码描述一下js的事件处理程序

<input type="button" name="button" value="button" onclick="clickX(event,this)">
<input class="button2" type="button" name="button2" value="button2">
<input class="button3" type="button" name="button3" value="button3">
<script type="text/javascript">
    //HTML事件处理程序
    //缺点：有时差问题；HTML与js代码紧密耦合
    var clickX = function(event,that){
        console.log(event);  //事件对象
        console.log(that.value);
    };    
    // DOM0级事件处理程序：将一个函数赋值给一个事件处理程序属性
    // 每个元素都有自己的事件处理程序属性，并且属性通常小写
    // 被认为是元素的方法
    var button2 = document.querySelector(".button2");
    button2.onclick = function(event){
        console.log(event);
        console.log(this.className);
    };
    // DOM2级事件处理程序
    //true（false）表示的是在捕获阶段（冒泡阶段）调用事件处理程序
    //相比DOM0级事件，好处是可以添加多个事件处理函数
    // 只能使用 removeEventListener() 函数来移除事件；
    //移除时传入的参数与添加处理程序中使用的参数相同；
    // 即以上方法对匿名函数是无法移除的，所以下面三个事件无法移除
    var button3 = document.querySelector(".button3");
    button3.addEventListener("click",function(){
        console.log(this);
    },false);
    button3.addEventListener("mouseover",function(){
        this.style.color = "#39f";
    },false);
    button3.addEventListener("mouseleave",function(){
        this.style.color = "#333";
    },false);

</script>