浅谈Event对象

      今天来说说事件，1995年IE定义了自己的事件模型，2004年DOM模型确定了标准的事件模型，并被其它浏览器所支持。所以事件处理需注意兼容性问题。当用户与Web页面进行某些交互时，解释器就会创建相应的event对象以描述事件信息。常见的事件有鼠标事件、键盘事件、状态事件，如：用户点击页面上的某项内容；鼠标经过某个元素；鼠标滚动窗口；用户按下某个按键；页面元素加载完成或加载失败等等。

    来说说事件句柄，也就是事件处理函数、事件监听函数，是用于响应某个事件而调用的函数。每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句。常见的事件句柄：onclick、ondbclick、onmouseover、onmousedown、onmouseup、onmouseout;onkeydown、onkeyup、onkeypress、onload、onunload、onchange、onfocus、onblur、onresize、onsubmit、onreset、onerror等等。

    事件绑定的三种方式：

第一种：直接在HTML中定义元素的事件相关属性。例：

HTML:<button οnclick="alert('点到我了')">按钮</button>

但这种方式违反了“内容与行为相分离”的原则，尽量少用。

第二种：在JavaScript脚本中为元素事件的相关属性赋值。例：

HTML:<button>按钮</button>

JS:

document.querySelector("button").οnclick=function(){

alert("点到我了");

}

这种方式实现了“内容与行为相分离”，但元素只能绑定一个监听函数。

第三种：一个事件可以绑定多个处理函数，但有兼容性问题。

HTML:<button id="btn">按钮</button>

JS:

var btn=document.getElementById("btn");

btn.attachEvent("onclick",function(){

alert("IE点到我了");

})//IE

btn.addEventListener("click",function(){

alert("DOM点到我了");

})//DOM

if(btn.addEventListener){//保证兼容性写法

btn.addEventListener('click',function(){

alert("点到我了");

})

btn.addEventListener('click',function(){

console.log("点到我了");

})

}else{

btn.attachEvent("onclick",function(){

alert("点到我了");

})

btn.attacheEvent("",function(){

console.log("点到我了");

})

}

好了，今天就说到这里，明天再会！