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 ...
随机推荐
- acdream1233 Royal Federation （构造？）
http://acdream.info/problem?pid=1233 Andrew Stankevich's Contest (3) ASC 3 Royal Federation Special ...
- Java 中浮点数---------BigDecimal和double（初探）
为什么要使用 bigdecimal? 借用<Effactive Java>这本书中的话,float和double类型的主要设计目标是为了科学计算和工程计算.他们执行二进制浮点运算,这是为了 ...
- jQuery回调、递延对象总结（中篇) —— 神奇的then方法
前言: 什么叫做递延对象,生成一个递延对象只需调用jQuery.Deferred函数,deferred这个单词译为延期,推迟,即延迟的意思,那么在jQuery中 又是如何表达延迟的呢,从递延对象中的t ...
- 解决python3 UnicodeEncodeError: 'gbk' codec can't encode character '\xXX' in position XX
从网上抓了一些字节流,想打印出来结果发生了一下错误: UnicodeEncodeError: 'gbk' codec can't encode character '\xbb' in position ...
- .NET之委托
有些.NET中的高级特性,比如:委托! 有一种怎么也搞不懂的赶脚... 博客读了好几篇,代码也动手写了,书中的一些介绍也看了, 各种搜索关于委托的,至今还处于"会用"的阶段. 该怎 ...
- HttpClient连接池的连接保持、超时和失效机制
HTTP是一种无连接的事务协议,底层使用的还是TCP,连接池复用的就是TCP连接,目的就是在一个TCP连接上进行多次的HTTP请求从而提高性能.每次HTTP请求结束的时候,HttpClient会判断连 ...
- LoadRunner监控Linux
rstat协议允许网络上的用户获得同一网络上各机器的性能参数. 需要下载3个包: (1)rsh-0.17-14.i386.rpm (2)rsh-server-0.17-14.i386.r ...
- Apache 虚拟主机
httpd支持的虚拟主机类型包括以下三种 基于域名:为每个虚拟主机使用不同的域名.但其对应的IP使相同的. 基于IP地址:为每个虚拟主机使用不同的域名,切各自对应的IP地址也不相同. 基于端口:这种方 ...
- JQuery可见性过滤选择器:hidden无法获取通过visibility:hidden样式隐藏的元素-遁地龙卷风
1.版本问题 如果你可以获取下列元素 <input type="hidden"/> <div style="display:none"> ...
- Unity 用户手册用户指南二维纹理 (Texture 2D)
http://www.58player.com/blog-2327-953.html 二维纹理 (Texture 2D) 纹理 (Textures) 使您的 网格 (Meshes).粒子 (Parti ...