javascript事件模型

2024-04-27 14:17:13

字体：大中小

来源：转载

供稿：网友

Javascript事件模型

1、事件流：

事件冒泡：

主要是IE浏览器用于解决事件流的技术，就是重事件源的事件被触发

它就会向自己的父节点一层层的去触发事件。

事件捕获：

是Netscape用于解决事件流的技术，就是从父节点向子节点去触发事件。

DOM事件流：

是Firefox用于解决事件流的技术，既有事件冒泡和事件捕获。

2、事件处理程序：

1.传统事件：

一个事件源只能绑定一个函数。它的兼容性比较强如果绑定多个那么后面的函数就会将前面的函数覆盖掉。

2.现代事件：

一个事件源可以绑定多个函数，函数是重后往前面执行的兼容性比较差，有些浏览器不支持。

2.1IE浏览器

attchEvent("事件名称",函数名) 添加事件

detachEvent("事件名称",函数名) 删除事件

两个方法接收两个参数

2.2DOM

addEventListener("事件名称",函数名,trueorfalse) 添加事件

removeEventListener("事件名称",函数名,trueorfalse) 删除事件

2.3解决兼容性问题

varfnClick1=function(){

alert("点我");

}

varfnClick2=function(){

alert("再点我");}

varoDiv=document.getElementById("div1");

if(document.addEventListener){//DOM

oDiv.addEventListener("click",fnClick1,true);

oDiv.addEventListener("click",fnClick2,true);

}

elseif(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属性的改变被浏览器忽略
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	读写	鼠标在相对于触发事件的元素的父元素X，Y坐标