js事件

HTML事件处理程序：

<input type="button" value="click" οnclick="showMessage(event);alert(event.type)"/>

<script>
    function showMessage(event){

        var event = event;
        do something
    }
</script> 

优点：事件处理程序的代码在执行的过程中 能访问全局作用域中的代码

缺点：(1)存在时差问题，即可能在按钮出现时用户点击了但事件处理程序没解析。解决方法：onclick = "try{showMessage()；}catch(ex){ }"

            (2)HTML和js代码紧密耦合

变量event中保存着event对象(showMessage参数中必须填入event.否则在火狐下取不到event)
DOM0级事件处理程序：

var btn = document.getElementById("btn");
btn.onclick = function(event){   //传入一个event对象（兼容DOM的浏览器都会将event传入到事件处理程序中）
    do something;
}

事件处理程序是在元素的作用域中运行的，this指向的是当前元素btn

所有浏览器都支持，兼容性最好

注意：在代码运行以前不会指定事件处理程序

DOM2级事件处理程序：

(W3C)

var btn = document.getElementById("btn");
btn.addEventListener("click",function handle(event){do something},false)   //传入一个event对象（兼容DOM的浏览器都会将event传入到事件处理程序中）

(IE)

var btn =document.getElementById("btn");
btn.attachEvent("onclick",function handle(event){do something})

事件处理程序会在全局作用域中运行，this == window
IE中的event对象：

使用HTML事件处理程序时，有一个event变量访问event对象

使用DOM0级方法添加事件处理程序时event为window的属性，即var event = window.event;

使用DOM2级事件处理程序时,有一个event对象作为参数传入事件处理程序中

DOM中的事件：关于this.currentTarget,target(注意作用域不同this指向也不一样)

var btn = document.getElementById("btn");
document.body.onclick = function(event){
    alert(event.currentTarget === document.body);               //true
    alert(this === document.body);                              //true
    alert(event.target === document.getElementById("btn"));     //true
}

（点击按钮）this和currentTarget（指向绑定事件处理程序的元素）都等于document.body，因为事件处理程序注册在上面，而target等于真正的处理目标