JavaScript DOM高级程序设计笔记__(二)----第四章 响应用户操作和事件
来源:互联网 发布:怎么改淘宝手机号 编辑:程序博客网 时间:2024/04/30 14:56
序言
事件就是操作检测与脚本执行的组合, 或者给予检测到的操作类型在某个对象上调用监听器.
术语
事件: onclick只是一个对象的属性,而不是一个事件,只是通过它可以为DOM元素指定一个click事件.
事件监听器: 即当指定的事件发生时会执行的JS函数.或者叫做事件处理程序.
事件注册: 这是一个DOM元素的具体事件指定事件监听器的过错. 或者叫做事件绑定.
调用(invoke): 当浏览器在检测到某种操作之后执行响应事件监听器的情形.
4.1 DOM2级事件
DOM2级事件规范没有被普遍采用, 必须使用不止一种方式完成相同目标,可以添加通用的事件函数,以便实现跨浏览器的事件注册和响应的操作.
4.2 事件的类型
4.2.1 对象时间
1. load 和 unload事件
load: 浏览器会在完成对页面的载入时调用window的load事件.load还可以用于其他载入外部内容的DOM对象, 例如框架和图片.
unload: 当用户通过单击链接或者关闭窗口而即将离开当前页面时,会调用window对象的unload事件
2. abort和error事件
error事件在动态载入并向文档中添加图像时, 可以用来识别图像载入错误.
3. resize事件
4. scroll事件
4.2.2 鼠标移动事件
mousemove, mouseover, mouseout
tips: 浏览器会在你按下鼠标键时调用mousemove事件-----同时也会调用与单击有关的事件,可以利用这个创建拖放的对象.
4.2.3 鼠标单击事件
mousedown, mouseup, click, 快速按两次按键会在click事件后发生dblclick
在单击和释放鼠标之间,拖动鼠标指针则不会法神click事件
只会有mousedown on document 和 mouseup on document
只会有mousedown on document ,mouseup on box, mouseup on document
4.2.4 键盘事件
keydown , keyup , keypress事件在keyup之后表示一个键按过了
4.2.5 表单事件
1. submit reset
2. blur focus
blue focus适用于<label> <input> <select> <textarea> <button>等表单元素. focus事件会在用户单击一个元素或者按Tab键切换到一个元素时被调用.而单击元素之外的其他地方或者按tab键离开该元素时,会在原先调用focus事件的元素上调用blur事件.
3. change事件
适用于<input> ,<select> , <textarea>在focus和blur事件之间修改元素的值时被调用.
4.3 控制事件流和注册事件监听器
4.3.1 事件流
<2> 两个阶段和三个模型
事件冒泡: 指的是目标元素的事件方法优先并且会被首先执行.然后,事件会向外传播到每个祖先元素,直至document对象.
事件捕获:指的是把优先权赋予了最外层的祖先元素,事件对应地被由外向内传播,直至抵达目标元素.
在所有支持W3C DOM的现代浏览器总,冒泡事件是针对传统注册的默认事件流.
<3> 阻止冒泡
在W3C DOM2事件中的方法取消冒泡阶段,可以调用stopPropagation()方法.
同样对于IE, 需要将事件的cancelBubble属性设置为true;
DOM标准中相同的stoppropagation()方法也适用于捕获阶段.不过IE9之前的版本都不支持捕获.
<4>取消默认动作
W3C DOM2: .preventDefault()方法取消默认动作
IE: .returnValue = false来取消默认事件
当一些与默认动作关联的事件不能被取消,如load事件,参照151
4.3.2 注册事件
1.嵌入式注册 <a onclick="alert('ok');"></a>
3.传统的事件模型
var anchor = document.getElementById('test');
anchor.onclick = function() {}
移除事件 anchor.onclick = null;
可以用来直接执行来调用事件: anchor.onclick();
<1>传统的事件模型中,this引用的是目标对象
<2>调用多个监听器. anchor.onclick = function() { funcA(); funcB();}
要阻止一个侦听器讲设计使用更多的逻辑代码按照需要组合事件侦听器,移除也非易事.
<3>传统的方法从属于浏览器默认的事件流,即冒泡事件流
4. Microsoft特有的事件模型
attachEvent(event, listener) 和 detachEvent()
可以使用fireEvent()方法来手工调用事件. anchor.fireEvent("onclick");
不支持事件捕获,只支持冒泡事件. 可以使用cancelBubble属性设置为true来阻止冒泡
5. W3C DOM2事件模型
addEventListener(type, func, true or false) 和 removeEventListener(type, func, true or false )方法.
跟Microsoft不同的是,事件类型去掉了on前缀,所有的事件必须使用事件名而非传统的方法名称来标识.
在W3C模型中, 也可以通过组合document.createEvent()方法和对象的dispatchEvent()方法来手工调用事件. _____待查阅
6.load事件的问题
4.3.3在事件侦听器中访问事件对象
在W3C的模型中,事件侦听器会取得一个表示事件自身的参数:
function eventListener(W3CEvent) {...}
在IE中,事件侦听器则不会取得任何参数,相应的事件对象被保存在window.event中.
可以使用function eventListener(W3CEvent) {
var eventObject = W3CEvent || window.event;...
}
1.简捷的语法
类似var example = (a != 2) ? 'no' : 'yes';
var example = a || b; 适合于设置可选变量的默认值非常有用, b为默认值.如果指定了a的值,那么a的值会覆盖b中的默认值
4.3.4跨浏览器的事件属性和方法
事件对象的继承
1.DOM2事件规范中的Event对象
eventPhase , 1(Event.CAPTURING_PHASE)表示捕获阶段要运行的代码,
2(Event.AT_TARGET)表示当前目标对象要运行的代码
3(Event.BUBBLING_PHASE)表示冒泡阶段要运行的代码
通过这些时间属性可以确保以正确的方式来访问正确的对象.例如,可以不必依赖于this关键字,而是根据事件的阶段使用target或currentTarget
W3C DOM2事件模型也定义了Even对象的方法
2.DOM2事件规范定义的MouseEvent对象
clientX, clientY表示的位置是相对于浏览器窗口而不是文档的.
而screenX 和 screenY分别表示事件发生的位置相对客户端所在的屏幕的水平和垂直坐标
ps: 附上MouseEvent的结构图:
3.处理诸多浏览器不兼容的问题
访问事件的目标元素
确认单击了哪个鼠标键
访问鼠标命令 keydown
- JavaScript DOM高级程序设计笔记__(二)----第四章 响应用户操作和事件
- JavaScript DOM高级程序设计笔记__(一)
- JavaScript DOM高级程序设计笔记__(一)
- javascript高级程序设计笔记(第四章)
- JavaScript高级程序设计 DOM事件处理 读书笔记
- JavaScript高级程序设计学习笔记--事件(二)(事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象)
- javascript高级程序设计---事件笔记
- Javascript高级程序设计--事件笔记
- JavaScript高级程序设计笔记 事件冒泡和事件捕获
- JavaScript高级程序设计笔记 事件冒泡和事件捕获
- javascript高级程序设计笔记(二)
- Javascript高级程序设计第二版第十章--DOM--笔记
- JavaScript高级程序设计-学习笔记1 (第一章--第四章)
- 《JavaScript高级程序设计》学习笔记(第四章)
- DOM---JavaScript高级程序设计的笔记
- javascript高级程序设计--学习笔记2 (第三章补充和第四章补充)
- javascript高级程序设计学习笔记——第四章 变量、作用域和内存问题
- dom javascript高级程序设计
- php中$_post()中的括号里填的是input的Name值,为什么不是Id值?
- 破产案或加速唯冠与苹果和解
- android上消息推送的实现
- 第05章 数组 04 练习2
- The Annotated Qt之QObject分析(1)
- JavaScript DOM高级程序设计笔记__(二)----第四章 响应用户操作和事件
- Httpclient默认连接数导致性能瓶颈问题
- mysql添加(删除)用户方法
- 垃圾回收--native_stderr.log
- 备忘录:Java连接SqlServer2008数据库中遇到的各种问题以及解决方法
- U-boot移植 (v2012.04.1 S3C2440平台) (四) usbslave 下载功能实现
- 【基础知识回顾】并发与并行的区别
- Oracle if else 语句的写法实例
- MFC(继续画图,孙鑫C++第十讲笔记整理)