JS高级程序设计2nd部分知识要点7
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>
IE的事件流叫做
事件冒泡(event bubbling)--事件开始时由最具体的元素(文档嵌套层次最深的寻附上节点)接收，然后逐级向上传播到较为不具体的节点(文档). 总之就是由内到外。
<div> 》<body>》html 》document
事件捕获(event capturing) 由最外层元素节点最先接收事件，最具体的节点最后接收事件。
document 》<html> 》<body> 》<div>
DOM 事件流
DOM2级事件 定义了两个方法 用于处理指定 和删除事件处理程序的操作： addEventListener() 和removerEventlistener() ,都接受3个参数:要处理的事件名，作为事件处理程序的函数和一个布尔值。布尔值参数如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序。
Firefox, Safari, Chrome 和 Opera支持 DOM2级事件处理程序 IE浏览器不支持
IE的事件处理程序
IE中实现了与DOM中类似的两个方法: attachEvent()和detachEvent(),这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。
跨浏览器事件对象处理
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on" + type, handler);
}else{
element["on" + type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on" + type, handler);
}else{
element["on" + type]=null;
}
}
};
DOM2级5种事件
1，UI（用户界面）事件,在用户与页面上的元素交互时触发。
a.)DOMActive:
b.)DOMFocusIn:
c.)DOMFocusOut
2，鼠标事件，当用户通过鼠标在页面上执行操作时触发。
a.)click
b.)dbclick
c.)mousedown 在用户按下了任意鼠标按钮时触发，不能通过键盘触发这个事件。
d.)mouseout 不能通过键盘触发这个事件
e.)mouseover 不能通过键盘触发这个事件
f.)mouseup 在用户释放鼠标按钮时触发，不能通过键盘触发这个事件。
g.)mousemove 不能通过键盘触发这个事件
click&dbclick触发事件顺序
mousedown>mouseup>click>mousedown>mouseup>click>dbclick
mouseup和mousedown不受其他事件影响
3，键盘事件，当用户通过键盘在页面上执行操作时触发。
4，HTML事件，当浏览器窗口发生变化或发生特定的客户端/服务器交互时触发。
5，变动(mutation)事件, 当底层DOM结构发生变化时触发。