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事件处理程序返回值

3、event对象

event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。

IE浏览器的event对象属性和方法：

DOM的event事件属性和方法：

两种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.oncontextmenu=function(oEvent){

    if (isIE){

        oEvent=window.event;

        oEvent.returnValue=http://www.mamicode.com/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: 让文本框失去焦点

javascript事件模型