javascript-Event对象事件
事件流
冒泡型事件(IE上的解决方案)
事件按照从最特定的事件目标到最不特定的事件目标的顺序触发.(而且IE6.0使<html/>元素也可接收冒泡的事件,最顶层为document事件)
如果不确定用户用的是IE5.5还是IE6,最好避免在<html/>元素级别上处理事件
<html onclick="handleClick()">
<head>
</head>
<body onclick="handleClick()">
</body>
</html>
四个流程:div,body,html,document的onclick事件
Mozilla 1.0及更高版本也支持冒泡型事件,但达到了另一层次.它也支持<html/>元素级别的事件,但,事件"起泡"一直上升到windows窗口对象(并不是DOM标准的一部分)
如上面的例子有五个流程:div,body,html,document,window的onclick事件
捕获型事件(Netscape Navigator4.0)
与冒泡刚好相反的过程:从最不精确的对象(document对象)开始触发,然后到最精确(可以在窗口级别捕获事件,不过必须开发人员特别指定).
Netscape Navigator不会把页面上的很多元素暴露给事件
再如上面的例子:两个流程:document,div的onclick事件
DOM事件流
DOM同时支持上面两种事件模型.但是捕获型事件先发生.两种事件流会触及DOM中的所有对象.从document开始,在也document结束.(大部分兼容标准的浏览器会继续将事件的捕获/冒泡延续到window对象)
但DOM中,文本节点也触发事件(在IE中不会),如果点击文本 Click Me! ,实际的事件流应该如下:
五个流程:window,document,body,div,text,text,div,body,document,window的onclick事件
事件处理函数/监听函数
事件这种特定行为都有自己的名字,如click,load,mousover,用于响应某个事件而调用的函数称为事件处理函数,或DOM称之为事件监听函数.
事件处理函数的两种分区方式(JavaScript,HTML):
这种方法事件处理的函数名必须小写才能正确响应
这两种方法在所有流行的浏览器中都可以使用.
但传统的做法还能为每个可用事件分配多个事件处理函数.但IE和DOM包含的方法名称却不同
IE:
参数:要分配的事件处理函数的名字 (onclick)和函数
如:
它还可与前面的方法合用:
可以添加多个处理函数:
div.attachEVent(("onclick",fnClick1);
div.attachEVent(("onclick",fnClick2);
DOM:
addEventListener()和removeEventListener()分别用例分配和移除事件处理函数
参数:1.事件名称 2.分配函数 3 .处理函数是用于冒泡阶段(false)还是捕获阶段(true)
1)如果使用addEventListener()将事件处理函数加入捕获阶段 则必须在removeEventListener()
中指明捕获阶段,才能正确的将这个事件处理函数删除.
例子:
var fnClick = function(){alert("click");};
var div = document.getElementById("div1");
div.addEventListener("click",fnClick,false);//添加到冒泡阶段
div.removeEventListener("click",fnClick,true);//在捕获阶段删除
虽不会产生错误,但不会删除
2)如果使用传统方法直接给事件处理函数属性赋值 ,事件处理函数将添加到事件冒泡阶段
oDiv.onclick=fnClick;
div.addEventListener("click",fnClick,false); //效果一样
3)直接赋时 后续对事件处理函数的赋值清除前面的赋值
oDiv.onclick=fnClick;
oDiv.onclick=fnDifferentClick;
事件对象
事件发生时会创建事件对象,它包含如下刚刚发生的事件的信息:
事件对象只在发生事件时才被创建,且只有事件处理函数才能访问.所有事件处理函数执行完毕后,事件对象就被销毁.
定位
IE中,事件对象是 window 对象的一个属性 event.事件处理函数必须如下访问事件对象:
DOM 标准中, event 对象必须作为唯一的参数传给事件处理函数.所以,在DOM兼容的浏览器中访问事件对象要如下做:
或
IE和DOM通用
1.获取事件类型
1)可以在任何一种浏览器中获取事件的类型: var eventType = event.type;
如:click mouseover 等
2)当某个函数同时为两个事件的处理函数时,这会很有用.(注意两者获得事件对象的方式不同)
2.获取按键代码(keydown/keyup事件)
在keydown/keyup事件中,可以使用keyCode属性来获取按下的键的数值代码:
3.检测Shift,Alt,Ctrl键:
4.获取客户端坐标:
5.获取屏幕坐标:
区别:
1.获取目标
位于事件中心的对象称为目标target.假如<div/>元素分配onclick事件处理函数触法click事件时,<div/>就被认为是目标
在IE中,目标包含在event对象的srcElement属性中
var oTarget=oEvent.srcElement;
在DOM兼容的浏览器中,目标包含在target属性中
var oTarget=oEvent.target;
2.获取字符代码
IE 和DOM都支持event对象的keyCode属性 ,它会返回按键的数值代码,如果按键代表一个字符(非Shift Ctrl Alt等), IE的keyCode将返回字符的代码(等于它的Unicode值)
在DOM中,按键的代码和字符会 有一个分离.要获取字符代码,用charCode属性: var icharcode=oEVent.charCode; 然后可用这个值获取实际的字符.用String.fromCharCode()方法
var sChar=String.fromCharCode(oEvent.);如果不确定按下的是否是字符,可用isChar属性进行判断 if(oEvent.isChar){var icharcode=oEVent.charCode;}
3.阻止某个事件的默认行为
IE中: oEvent.returnValue=false;
Mozilla中: oEvent.preventDefault();
一般性将对不同浏览器的事件处理函数放在一起的方法:
event = window.event;
4.停止事件复制(进一步的冒泡)
IE: 设置cancelBubble属性为true:
Mozilla: 只需调用stopPropagation()方法
这可以防止因为一个元素触发了事件,而使也触发它的父元素,document等的事件也触发
事件的类型
对于鼠标事件,每个鼠标事件都会给以下event对象的属性填入值:
坐标属性
type属性
target(DOM)或srcElement(IE)属性
shiftKey,ctrlKey,altKey,metaKey(DOM)属性
button属性(只在mousedown,mouseover,mouseout,mousemove,mouseup事件中)
鼠标事件是 web 上最常用的事件类型.其中包含以下事件:
click
dblclick
mousedown
mouseout
mouseover
mouseup
mousemove
值得注意的是Opera 7.5在检测不同的按键(Shift,Ctrl和Alt)时有Bug.它错误地把shift键报告为ctrl键,且不会检测Alt键
顺序:
如要发生dbclick事件,在同一个目标上要按顺序发生: mousedown mouseup click; mousedown mouseup click dbclick
移动鼠标从一个对象进入另一个对象时,先发生的事件是mouseout.然后在这两个对象上都触发mousemove事件,最后在进入的那个对象上触发mouseover事件
键盘事件
keydown
keypress
keyup
每个键盘事件都会填入的事件属性
keyCode属性
charCode属性(仅DOM)
target(DOM)或srcElement(IE)属性
shiftKey,ctrlKey,altKey,metaKey(DOM)属性
function handleEvent(event){
}
顺序
字符键: keydown keypress keyup
当按住一个键不放时,两个事件逐个发生
HTML事件
load事件
unload事件
abort事件
error事件
select事件
change事件
submit事件
reset事件
resize事件
scroll事件
focus事件
blur事件
对于resize事件,IE和Opera在窗口的大小一改变时就触发,而Mozilla则是等不再改变时才触发.而且最大化和最小化窗口时也会触发此事件
scroll事件中,可以通过使用document.body.scrollLeft document.body.scrollTop 来获得当前滚动框的顶点位置
变化事件
DOM标准虽然定义了变化事件,(是指添加节点等操作),但还没有浏览器实现了它.只列出:
DOMSubtreeModified
DOMNodeInserted
DOMNodeRemoved
DOMNodeRemovedFromDocume
DOMNodeInsertedIntoDocum