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中#号后面的所有字符串）发生变化是通知开发人员
13. javacript高级程序设计-事件的更多相关文章
- 24. javacript高级程序设计-最佳实践
1. 最佳实践 l 来自其他语言的代码约定可以用于决定何时进行注释,以及如何进行缩进,不过JavaScript需要针对其松散类型的性质创造一些特殊的约定 l javascript应该定义行为,html ...
- 23. javacript高级程序设计-数据存储
1. 数据存储 1.1 cookie HTTP Cookie, cookie,最初用来在客户端存储回话信息. (1). 限制,不同浏览器对特定域名下的cookie 的个数有限制,每个域名下最好不要操过 ...
- 17. javacript高级程序设计-错误处理与调试
1. 错误处理与调试 l 在可能发生错误的地方使用try-catch方法,可以对错误进行及时的相应 l 使用window.onerror事件处理程序,这种方式可以接受try-catch不能处理的所有错 ...
- 25. javacript高级程序设计-新兴的API
1. 新兴的API requestAnimationFrame():是一个着眼于优化js动画的api,能够在动画运行期间发出信号.通过这种机制,浏览器就能够自动优化屏幕重绘操作 Page Visibi ...
- 22. javacript高级程序设计-高级技巧
1. 高级技巧 1.1 函数 l 可以使用惰性载入函数,将任何分支推迟到第一个调用函数的时候 l 函数绑定可以让你创建始终在指定环境中运行的函数,同时函数柯里化可以让你创建已经填写了某些参数的函数 l ...
- 21. javacript高级程序设计-Ajax与Comet
1. Ajax与Comet 1.1 XMLHttpRequest对象 IE5是第一款引入XHR对象的浏览器,IE5中是通过MSXML库中的一个ActiveX对象实现的.因此在IE中可能存在MSXML2 ...
- 20. javacript高级程序设计-JSON
1. JSON JSON是一种数据格式,存在以下三种类型的值: l 简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串.数值.布尔值和null,不支持 undefined,例如: ...
- 19. javacript高级程序设计-E4X
1. E4X E4X是对ECMAScript的一个扩展, l 与DOM不同,E4X只用一个类型节点来表示XML中的各个节点 l XML对象中封装了对所有节点都有用的数据和行为.为了表示多个节点的集合, ...
- 18. javacript高级程序设计-JavaScript与XML
1. JavaScript与XML IE采取了下列方式: l 通过ActiveX对象来支持处理XML,而相同的对象也可以用来构建桌面应用程序 l Windows携带了MSXML库,JavaScript ...
随机推荐
- H5 使用
关闭页面 http://www.bcty365.com/content-146-3343-1.html 回退页面: plus.key.addEventListener('backbutton', fu ...
- ActiveMQ 目录
(1) ActiveMQ简介 (2) JMS基本概念和模型 (3) JMS的可靠性 (4) ActiveMQ结合Spring开发 (5)ActiveMQ支持的传输协议 (6)ActiveMQ消息存储持 ...
- 有关jquery checkbox获取checked的问题
$("input").attr("checked"); <input type="checkbox" value="1&qu ...
- HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...
- OC第一节 —— 类和对象
一.类和对象的概念 1.1类 自己的定义: 具有相同或相似性质对象的抽象. 1.2 对象 自己的定义: 对象是人们要进行研究的任何物体,从最简单的整数到复杂的飞机 等均可以看做是对象. 举例说明: 类 ...
- Java中将unix时间戳转化为正常显示时间
在unix中时间戳是一串数字表示的,使用起来非常不方便,转化方式如下: //Convert Unix timestamp to normal date style public String Time ...
- explain mysql的type字段，索引的类型
4.type这列很重要,显示了连接使用了哪种类别,有无使用索引.从最好到最差的连接类型为const.eq_reg.ref.range.indexhe和ALL (1).system这是const联接类型 ...
- Oracle锁的机制
一.为什么要有锁的机制 我们都知道数据库是一个多用户使用的共享资源.当多个用户并发地存取数据时,在数据库中就会产生多个事务同时存取同一数据的情况.若对并发操作不加控制就可能会读取和存储不正确的数据,破 ...
- Mongodb——GridFS
GridFS用于存储和恢复那些超过16M(BSON文件限制)的文件. GridFS将文件分成大块,将每个大块存储为单独的文件.GridFS中限制chunk最大为256k.GridFS使用两个colle ...
- gc是什么，什么时候需要gc
Java是由C++发展来的. 它摈弃了C++中一些繁琐容易出错的东西.其中有一条就是这个GC. 写C/C++程序,程序员定义了一个变量,就是在内存中开辟了一段相应的空间来存值.内存再大也是有限的,所以 ...