JavaScript事件模型

事件模型简介

什么是事件。
事件有什么作用。
事件处理模型最早在IE4.0浏览器里提供支持。
Netscape将其源码贡献给Mozilla开源社区后，这种浏览器的事件模型一直遵循DOM标准在发展。
后来的浏览器，如Opera,Safair都遵循DOM标准。

事件流

事件流意味着页面上不止一个元素可响应相同的事件。
如：当我们点击页面上的按钮时，实际上我们是点击了按钮，以及按钮的容器——整个页面。

不同的浏览器有不同实现事件流的方法。
事件冒泡(IE)。（所有都支持）
事件捕获(NetsCape)。（火狐、谷歌支持）
DOM事件流(FireFox)。事件处理

、

事件处理程序

传统事件处理程序指派方法
被广泛支持
现代事件处理程序指派方法。
只被现代浏览器支持。
浏览器之间存在不兼容的问题。

传统事件处理程序指派方法
一、取得id = div1的元素节点。
var div1 = document.getElementById("div1");

//设置元素节点的onclick属性
div1.onclick = function(){alert("div1 被点了");}
或
function divClick(){alert(‘点中’);}
div1.οnclick=divClick;

注意：
1、绑定事件处理程序时，后面不能加括号
2.必须确保在元素之后设置事件处理程序。
3.可在window.onload中指定处理程序。

二、在事件属性中指定
<div id="div1" οnclick="alert("div1 被点了.");" ></div>

现代事件处理程序指派方法

一、IE浏览器
var div1 = document.getElementById("div1");

//添加事件处理程序
div1.attachEvent("onclick",click1);
//删除事件处理程序
div1.detachEvent("onclick",click1);

function click1(){
    alert("div1 is click...");
}

提示：可以在一个事件上添加多个事件处理函数。

二、DOM
var div1 = document.getElementById("div1");

//添加事件处理程序,true:捕获阶段; false:冒泡阶段
div1.addEventListener("click",click1,false);
//删除事件处理程序
div1.removeEventListener("click",click1,false);

function click1(){
    alert("div1 is click...");
}

提示：删除事件处理程序时，阶段要相同。
传统事件处理程序是在冒泡阶段添加的。

兼容性问题的解决

//DOM
if(document.addEventListener){
    div1.addEventListener("click",click1,false);
}

//IE
else if(document.attachEvent){
    div1.attachEvent("onclick",click1);

}

事件处理程序的返回值

利用事件处理程序的返回值，可以影响事件的默认行为。
submit按钮默认行为是提交表单。
超链接的默认行为是向指定资源发起请求。

表单验证例子...
超链接例子。
<a href="a.html" οnclick="return confirm('要跳转吗？')">a.html</a>

注意：是根据返回结果是true或false来确定是否执行默认行为。
更多默认行为见P41

event对象

事件发生时产生的对象。
封装了跟事件相关的信息。
鼠标信息
键盘信息
IE和DOM具有不同的实现方式。

得到event对象

//IE
div1.onclick = function(){
    var e = window.event;
}
//DOM
div1.onclick = function(){
    var e = arguments[0];
}

div1.οnclick=function(oEvent){
}

//解决兼容性问题
if(window.event){
    IE...
}else{
    DOM...
}

event的属性和方法

Dom和IE的event相同点。
获取事件类型：e.type
获取键盘码：keydown/keyup
检测是否按下e.shiftKey,e.altKey,e.ctrlKey
获取客户坐标:e.clientX,e.clientY
获取屏幕坐标：e.screenX,e.screenY
Dom和IE的event不同点

获取事件源	e.srcElement	e.target
获取字符码	e.keyCode	e.charCode
阻止默认行为	e.returnValue=false	e.preventDefault()
中止冒泡传播	e.cancelBubble=true	e.ststopPropagation()

事件类型

鼠标事件、键盘事件、HTML事件

鼠标事件
常见事件
click
dbclick
mousedown
mouseout
mouseover
mouseup
mousemove
页面上所有元素均支持鼠标事件。
事件发生顺序
单击：mousedown,mouseup,click
双击：mousedown,mouseup,click,mousedown,mouseup,click,doubleclick

键盘事件
常见事件
keydown
keypress
keyup
通常在输入框上实现键盘事件。
返回false表示不响应该事件
事件发生顺序
字符键：keydown,keypress,keyup
非字符键：keydown,keyup

HTML事件
常见事件
load,unload
abort,error
select
change
submit
reset
resize
scroll
focus
blur