首页 > 代码库 > javascript事件模型

javascript事件模型

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

导致对windowstatusdefaultStatus属性的改变被浏览器忽略

submit

取消表单提交

 

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

读写

鼠标在相对于触发事件的元素的父元素XY坐标

 

DOMevent事件属性和方法

属性/方法

类型

是否可读写

描述

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、检测shiftaltctrl

4、获取客户区坐标

5、获取屏幕坐标

不同点:

1、获取目标

IEvar oTarget=oEvent.srcElement

DOMvar 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

TargetDOM)或srcElementIE)属性

shiftKeyctrlKeyaltKeymetaKeyDOM)属性,按下将触发一个keyDown事件,并将相应的属性设置为true

6HTML事件

load:所有的东西全部被加载后触发的事件

unload:所有对象呗卸载后触发事件

abort:阻止安全装在

error:当页面发生错误时触发的一个事件

select:当文本框获得焦点时选中文本框中所有的数据

change:当下拉框中的数据发生改变时触发的事件

scroll:当页面中的滚动条发生滚动时 触发的事件

    focus:让文本框获得焦点

    blur: 让文本框失去焦点

javascript事件模型