Javascript事件模型

1、事件流：
     事件冒泡：
主要是IE浏览器用于解决事件流的技术，就是重事件源的事件被触发它就会向自己的父节点一层层的去触发事件。
     事件捕获：
是Netscape用于解决事件流的技术，就是从父节点向子节点去触发事件。
     DOM事件流：
     是FireFox用于解决事件流的技术，既有事件冒泡和事件捕获。
2、事件处理程序：
1.传统事件：
一个事件源只能绑定一个函数。它的兼容性比较强如果绑定多个那么后面的函数就会将前面的函数覆盖掉。
2.现代事件：
 一个事件源可以绑定多个函数，函数是重后往前面执行的兼容性比较差，有些浏览器不支持。
2.1 IE浏览器
attchEvent("事件名称",函数名) 添加事件
detachEvent("事件名称",函数名) 删除事件
两个方法接收两个参数
2.2DOM
addEventListener("事件名称",函数名,true or false) 添加事件
removeEventListener("事件名称",函数名,true or false) 删除事件
2.3解决兼容性问题
var fnClick1=function(){
    alert("点我");
}
var fnClick2=function(){
    alert("再点我");}
var oDiv=document.getElementById("div1");
if(document.addEventListener){//DOM
    oDiv.addEventListener("click",fnClick1,true);
    oDiv.addEventListener("click",fnClick2,true);
}
else if(document.attachEvent){//IE
    oDiv.attachEvent("click",fnClick1);
    oDiv.attachEvent("click",fnClick2);
}
2.4事件处理程序返回值
事件处理程序
返回false值效果
click
单选按钮和复选框取消设置。对于submit按钮，表单提交被取消。对于reset按钮，表单不被重置。对于链接，不装载链接目标。
dragdrop
取消拖拽
keydown
在用户按住键不放时，取消随后的keypress事件
keypress
取消keypress事件
mousedown
取消默认行为（拖得开始，选择的开始，解除链接）
mouseover
导致对window的status或defaultStatus属性的改变被浏览器忽略
submi
取消表单提交
3、event对象
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。
IE浏览器的event对象属性和方法：
属性/方法
类型
是否可读写
描述
altkey
boolean
读写
指示是否按下alt键
button
Integer
读写
鼠标事件发生时候按下的鼠标按钮
0-没有按鼠标按钮
1-按了鼠标左按钮
2-按了鼠标右按钮
3-同时按下鼠标左右按钮
4-按了鼠标中间按钮
5-同时按下鼠标左按钮和中间按钮
6-同时按下鼠标右按钮和中间按钮
7-同时按下鼠标左、中、右三个按钮
cancelBubble
boolean
读写
将其设置为true可以取消事件冒泡
clientX
clientY
Integer
读写
事件发生时，鼠标指针在客户区（不包括工具栏、滚动条等）的X坐标，Y坐标
ctrlkey
boolean
读写
指示是否按下ctrl键
fromElement
element
读写
在鼠标事件中鼠标移出的元素
keyCode
Integer
读写
对于keypress事件，指示按下的键的unicode字符；
对于keydown/keyup事件，指示按下的键盘是数字表示器
offsetX
offsetY
Integer
读写
鼠标指针相对于引发的对象的X坐标，Y坐标
repeat
boolean
读
如果keydown事件被重复触发，值等于true否则false
returnValue
boolean
读写
值为false时，取消事件的默认行为
screenX
screenY
Integer
读写
鼠标指针相对于计算机屏幕的X坐标，Y坐标
shiftkey
boolean
读写
指示是否按下shift键
srcElenment
element
读写
导致事件发生的元素
toElement
element
读写
鼠标事件中，鼠标进入元素
type
string
读写
事件名称
x,y
Integer
读写
鼠标在相对于触发事件的元素的父元素X，Y坐标
DOM的event事件属性和方法：
属性/方法
类型
是否可读写
描述
altkey
boolean
读写
指示是否按下alt键
button
Integer
读
鼠标事件发生时候按下的鼠标按钮
0-没有按鼠标按钮
1-按了鼠标左按钮
2-按了鼠标右按钮
3-同时按下鼠标左右按钮
4-按了鼠标中间按钮
5-同时按下鼠标左按钮和中间按钮
6-同时按下鼠标右按钮和中间按钮
7-同时按下鼠标左、中、右三个按钮
cancelBubble
boolean
读写
指示事件冒泡是否已被取消
clientX
clientY
Integer
读
事件发生时，鼠标指针在客户区（不包括工具栏、滚动条等）的X坐标，Y坐标
ctrlkey
boolean
读
指示是否按下ctrl键
keyCode
Integer
读写
指示按下的键盘的数字表示器
screenX
screenY
Integer
读
鼠标指针相对于计算机屏幕的X坐标，Y坐标
shiftkey
boolean
读
指示是否按下shift键
type
string
读
事件名称
Bubbles
boolean
读
指示事件是否冒泡
cancellable
boolean
读
指示事件是否可以取消
charCode
Integer
读
被按下的键的unicode字符值
currentTarget
element
读
当前事件目标所在的元素
detail
Integer
读
鼠标按钮被点击的次数
eventPhase
Integer
读
事件的阶段：其值为
 0-捕获节点
 1-在目标上
 2-冒泡阶段
isChar
boolean
读
指示被按下的键是否是一个字符
mateKey
Integer
读
指示是否按下META键
pageX,pageY
Integer
读
鼠标指针相对于页面的X坐标，Y坐标
preventDefault()
function
调用此方法可以阻止事件的默认行为
ralatedTarget
element
读
事件的下一个目标，经常用在鼠标事件中
stopPropagation()
function
调用该方法可以阻止事件的进一步传播（冒泡）
target
element
读
触发的事件元素/对象
timeStamp
long
读
事件发生的时间
两种event事件对象的相同点：
1、获取事件类型
2、获取键盘代码（keydown/keyup事件）
3、检测shift、alt、ctrl
4、获取客户区坐标
5、获取屏幕坐标
不同点：
1、获取目标
IE：var oTarget=oEvent.srcElement；
DOM：var oTarget=oEvent.target；
2、获取字符码
3、阻止事件的默认行为
document.body.οncοntextmenu=function(oEvent){
    if (isIE){
        oEvent=window.event;
        oEvent.returnValue=false;
    }else{
        oEvent.preventDefault();
    }
}
4、中止事件传播（冒泡）
4、鼠标事件：
onclick:鼠标单击时监听的事件
ondbclick: 鼠标双击时监听的事件
onmousedown: 鼠标按下时监听的事件
onmouseup: 鼠标弹起时监听的事件
onmousemove: 鼠标移动时监听的事件
onmouseout: 鼠标移出时监听的事件
onmouseover: 鼠标移进时监听的事件
5、键盘事件：
keydown:键盘按下一个键时的监听事件
keypress: 键盘按（按下并弹起）一个键时的监听事件
keyup: 键盘弹起一个键时的监听事件
事件属性：
keyCode属性
charCode属性（DOM）
Target（DOM）或srcElement（IE）属性
shiftKey、ctrlKey、altKey、metaKey（DOM）属性，按下将触发一个keyDown事件，并将相应的属性设置为true
6、HTML事件：
load:所有的东西全部被加载后触发的事件
unload：所有对象呗卸载后触发事件
abort:阻止安全装在
error:当页面发生错误时触发的一个事件
select:当文本框获得焦点时选中文本框中所有的数据
change:当下拉框中的数据发生改变时触发的事件
scroll:当页面中的滚动条发生滚动时 触发的事件
    focus:让文本框获得焦点
    blur: 让文本框失去焦点