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 ...
随机推荐
- xStream完美转换XML、JSON
xStream框架 xStream可以轻易的将Java对象和xml文档相互转换,而且可以修改某个特定的属性和节点名称,而且也支持json的转换: 前面有介绍过json-lib这个框架,在线博文:htt ...
- JMX整理
阅读目录 Standard MBean与MXBean的区别 实现 Notification 认证与授权 JConsole Custom Client What and Why JMX JMX的全称为J ...
- iframe框架嵌套技巧（全屏，去双滚动条）
一般情况下我们很少用到iframe(框架),但有些特殊的情况下我们不得不使用iframe,那么或许或遇到嵌套内容不全屏,网页周围有边框,双滚动条等等情况,下面来说一下处理技巧. 全屏与边框处理: &l ...
- 大数据——sparksql
sparksql:http://www.cnblogs.com/shishanyuan/p/4723604.html?utm_source=tuicool spark on yarn :http:// ...
- 2012Chengdu B （快速组合数）
B - Candy Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit St ...
- Spark之命令
Spark之命令 1.spark运行模式有4种: a.local 多有用测试, b. standalone:spark 集群模式,使用spark自己的调度方式. c. Yarn: 对Mapreduce ...
- ServiceManager: Permmission failure: android.permission.RECORD_AUDIO
今天在Android6.0系统的手机上测试一款APP,出现如题错误: ServiceManager: Permmission failure: android.permission.RECORD_AU ...
- Code First01---CodeFirst项目的搭建
Entity Framework支持Database First.Model First和Code Only三种开发模式,各模式的开发流程大相径庭,开发体验完全不一样.三种开发模式各有优缺点,对于程序 ...
- 架设WEBIM
使用openfire+jwchat构建. Openfire 采用Java开发,开源的实时协作(RTC)服务器基于XMPP(Jabber)协议.Openfire安装和使用都非常简单,并利用Web进行管理 ...
- Codeforces 260 B. Fedya and Maths
题目链接:http://codeforces.com/contest/456/problem/B 解题报告:输入一个n,让你判断(1n + 2n + 3n + 4n) mod 5的结果是多少?注意n的 ...