13. javacript高级程序设计-事件
1. 事件
1.1 事件流
事件流描述的是从页面中接受事件的顺序，IE的事件是冒泡流，而Netscape Communicator的事件流是事件捕捉流。
1.1.1 事件冒泡
<!DOCTYPE html>
<html>
<title>xxx</title>
<body>
<div id="myDiv">click me</div>
</body>
</html>
如果你点击了页面中的<div>元素，那么这个click事件会按照如下顺序传播：
(1). div
(2). body
(3). html
(4). document
1.1.2 事件捕捉
<!DOCTYPE html>
<html>
<title>xxx</title>
<body>
<div id="myDiv">click me</div>
</body>
</html>
如果你点击了页面中的<div>元素，那么这个click事件会按照如下顺序传播：
(1). document
(2). html
(3). body
(4). div
1.1.3 DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。（IE9以上支持）
1.2 事件处理程序
1.2.1 HTML事件处理程序
<!DOCTYPE html>
<html>
<title>xxx</title>
<body>
<div id="myDiv" onclick="alert('hello')">click me</div>
</body>
</html>
将事件处理程序直接写在 html中
1.2.2 DOM0事件处理程序
(1). 设定处理程序
每个元素（包括window和document）都有自己的处理程序属性，这些属性通常都是小写，将这种属性设置为一个函数，就可以指定事件处理程序，
var btn = document.getElementsById(“btn”);
btn.onclick = function(){
alert(‘hello world’);
}
(2). 删除处理程序
btn.onclick = null;
1.2.3 DOM2事件处理程序
“DOM2事件”定义了两个方法用来删除和指定处理程序：addEventListener()和removeEventListener()。它们都接受三个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。（true表示捕获阶段调用，false表示冒泡阶段调用）
var btn = document.getElementsById(“btn”);
btn.addEventListener('click',function () {
// body...
alert('hi');
},false);
btn.removeEventListener('click',function () {
// body...
alert('hi');
},false);
1.2.4 IE事件处理程序
“IE事件”定义了两个方法用来删除和指定处理程序：attchEvent ()和detachEvent ()。它们都接受三个参数：要处理的事件名，作为事件处理程序的函数，IE处理程序在冒泡阶段执行
var btn = document.getElementsById(“btn”);
btn. attchEvent ('click',function () {
// body...
alert('hi');
});
btn. detachEvent ('click',function () {
// body...
alert('hi');
});
1.2.5 跨浏览器处理程序
var EventUtil = {
addHandler: function(element, type, handler) {
// body...
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent(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(type, handler);
} else {
element["on" + type] = null;
}
}
}
1.3 事件对象
1.3.1 DOM事件对象
兼容DOM浏览器会将一个event对象传入到事件处理程序中，event对象包含与创建它的特定事件有关的属性和方法。
|
属性/方法 |
类型 |
读/写 |
说明 |
|
bubbles |
|
|
|
|
cancelable |
|
|
|
|
currentTarget |
Element |
|
当前正在处理时间的元素 |
|
defaultPrevented |
|
|
|
|
detail |
|
|
|
|
eventPhase |
|
|
|
|
preventDefault() |
Function |
|
取消事件的默认行为 |
|
stopImmediatePropagation() |
|
|
|
|
stopPropagation() |
Function |
|
取消事件的进一步捕获或者冒泡 |
|
target |
|
|
事件的目标 |
|
trusted |
|
|
|
|
type |
|
|
事件的类型 |
|
view |
|
|
|
1.3.2 IE事件对象
IE DOM中的event一般作为window对象的一个属性存在。
|
属性/方法 |
类型 |
读/写 |
说明 |
|
cancelBubble |
|
|
设置true取消事件冒泡 |
|
returnValue |
|
|
设置false取消事件默认行为 |
|
srcElement |
|
|
事件的目标 |
|
type |
|
|
被触发的事件类型 |
1.3.3 跨浏览器事件对象
var EventUtil = {
addHandler: function(element, type, handler) {
// body...
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent(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(type, handler);
} else {
element["on" + type] = null;
}
},
getEvent: function(event) {
return event ? event : window.event;
},
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
1.4 事件类型
1.4.1 UI事件
l load
当页面完全加载后（包括所有图像，JavaScript文件，Css文件等外部资源），就会触发window上面的load事件
l unload
与load事件对应的unload事件，这个事件在文档被完全卸载后触发
l resize
当浏览器窗口被调整到一个新的高度或者宽度的时候，就会触发window窗口的resize事件
l scroll
scroll事件在window对象上发生，表示页面相应元素的变化
1.4.2 焦点事件
l focus：元素获取焦点时触发，不冒泡
l blur：元素失去焦点是触发，不冒泡
1.4.3 鼠标与滚轮事件
l click：点击主鼠标按钮（通常左键）或者按下回车键
l dbclick：双击主鼠标按钮（通常左键）
l mousedown：在用户按下任意鼠标键触发
l mouseenter：在鼠标光标首次移动到元素范围内触发
l mouseleave：位于元素范围内的光标移动到元素范围之外是触发
l mousemove：在鼠标在元素范围内移动是触发
l mouseout：鼠标指针在一个元素上方，移动到另一个元素上方时触发
l mouseover：鼠标从元素外部首次移动到元素内触发
l mouseup：用户释放鼠标按钮时触发
1.4.4 键盘与文本事件
l keydown：键盘按下事件
l keypress：按下键盘上的字符键触发，获取按下当前键的ASCII码
getCharCode:function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
l keyup：用户释放键盘上的按键触发
1.4.5 HTML5事件
l contextmenu
通过点击鼠标右键可以显示上下文菜单，事件的目标是发生在用户操作的元素上
l beforeunload
页面卸载前触发，以便阻止页面卸载
l DOMContentLoaded
这个事件会在DOM元素加载完毕触发，不理会css，js，图片等外部元素
l readystatechange
这个事件的目的是提供与文档或元素的加载状态有关的信息，支持readystatechange事件的每个对象都有一个readyState属性，
- uninitialized：未初始化
- loading：正在加载数据
- loaded：加载数据完毕
- interactive：可以操作对象，但还没有完全加载完成
- complete：对象已经加载完毕
l haschange
在页面URL的参数列表发生变化时（以及URL中#号后面的所有字符串）发生变化是通知开发人员
- 24. javacript高级程序设计-最佳实践
- 4. javacript高级程序设计-变量、作用域和内存问题
- 18. javacript高级程序设计-JavaScript与XML
- 1. javacript高级程序设计-JavaScript简介
- 6. javacript高级程序设计-面向对象设计
- 17. javacript高级程序设计-错误处理与调试
- 15. javacript高级程序设计-Canvas绘图
- 19. javacript高级程序设计-E4X
- 2. javacript高级程序设计-在HTML中使用JavaScript
- 10. javacript高级程序设计-DOM
- 23. javacript高级程序设计-数据存储
- 22. javacript高级程序设计-高级技巧
- 5. javacript高级程序设计-引用类型
- 8. javacript高级程序设计-BOM
- 12. javacript高级程序设计-DOM2和DOM3
- 20. javacript高级程序设计-JSON
- 9. javacript高级程序设计-客户端检测
- 3. javacript高级程序设计-基本概念
- 11. javacript高级程序设计-DOM扩展
- 14. javacript高级程序设计-表单