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 ...
随机推荐
- Eclipse里项目名有红叉，但是底下的每一个文件都没有红叉
如果是因为java compiler level does not match the version of the installed java, 那么我们打开项目的properties,有一个选项 ...
- navicat linux 破解
破解方法一. navicat linux版本有一个月的试用期, 当过了试用期以后, 不能再进入. 但其实只要将~下.navicat目录下的system.reg文件删掉, 重新启动navicat ...
- java.lang.reflect.Method
java.lang.reflect.Method 一.Method类是什么 Method是一个类,位于java.lang.reflect包下. 在Java反射中 Method类描述的是 类的方法信息, ...
- ThinkPHP3.2对接开发支付宝即时到帐接口
ThinkPHP3.2对接开发支付宝即时到帐接口 在做一些商城.自动发卡网站.会员积分充值.金币充值等等这类网站都时候,我们极大可能需要使用到第三方都支付接口.不管是财付通.支付宝.银联.贝宝.易宝这 ...
- 使用MVVM框架（avalonJS）进行快速开发
背景 在运营活动开发中,因为工作的重复性很大,同时往往开发时间短,某些情况下也会非常紧急,导致了活动开发时间被大大压缩,同时有些活动逻辑复杂,数据或者状态变更都需要手动渲染,容易出错,正是因为这些问题 ...
- [设计模式] javascript 之 策略模式
策略模式说明 定义: 封装一系列的算法,使得他们之间可以相互替换,本模式使用算法独立于使用它的客户的变化. 说明:策略模式,是一种组织算法的模式,核心不在于算法,而在于组织一系列的算法,并且如何去使用 ...
- Linux运维初级教程（四）shell简介
查看系统可用的shell命令 cat /etc/shells shell是用于与内核进行交流的工具 管道和重定向(< < > > |) |为管道 标准输入的文件描述符为0,标准 ...
- Inside the c++ object module 阅读摘要
这本书是 Stanley B. Lippman于1996年所写,而最早的c++标准是 ISO/IEC 14882:1998[18],即C++98. Chapter 1: Object Lessons ...
- ICloud没有密码怎么注销？
忘了密码的用这方法就可以啦1.现在我说你做 . 先进入 iCloud 点击 某某账户(要删的账户)2.第二栏密码那里删除原来的再输入ios(任意密码)3.然后点完成 之后会出现错误.请点 好.然后左上 ...
- gcc 4.8.3 install centos
http://blog.csdn.net/xlx921027/article/details/17382643