JavaScript高级程序设计50.pdf
hashchange事件
HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发人员经常要利用URL参数列来保存状态或导航信息
将hashchange事件处理程序添加给window对象,然后URL参数列表只要变化就会调用它。此时的event对象额外包含两个属性:oldURL和newURL,分别保存着参数列表变化前后的完整URL
EventUtil.addHandler(window,"hashchange",function(event){
alert("OldURL:"+event.oldURL+"\nNewURL:"+event.newURL);
});
支持hashchange事件的浏览器有IE8+、Firefox3.6+、Safari5+、Chrome和Opera10.6+,这些浏览器中,只有Firefox6+、Chrome和Opera支持oldURL和newURL属性
为此,最好使用location对象来确定当前的参数列表
EventUtil.addHandler(window,"hashchange",function(event){
alert("Current hash:"+location.hash);
});
使用以下代码检测浏览器是否支持hashchange事件:
var isSupported=("onhashchange" in window); //这里有BUG
如果IE8是在IE7文档模式下运行,即使功能无效它也会返回true,更为稳妥的检测
var isSupported=("onhashchange" in window) &&(document.documentMode===undefined||document.documentMode>7);
设备事件
略
内存与性能
对于Javascript,添加到页面上的事件处理程序数量直接影响到页面的整体运行性能,利用好事件处理程序能够在一定程度上提示性能
事件委托
用于“事件处理程序过多”,利用事件冒泡,指定一个事件处理程序就可以管理某一类型的所有事件
var list=document.getElementById("myLink");
EventUtil.addHandler(list,"click",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
switch(target.id){
case "doSomething":
document.title="I changed the document's title";
break;
case "goSomewhere":
location.href="http://www.wrox.com";
break;
case "sayHi":
alert("hi");
break;
}
});
多数的鼠标事件和键盘事件可以使用事件委托
移除事件处理程序
内存中留有过时不用的“空事件处理程序”,也会造成web应用程序内存与性能问题
使用removeChild()、replaceChild()以及innerHTML前,尽可能手工移除事件处理程序
btn.onclick=null;
另一种情况是卸载页面的时候没有清理干净事件处理程序,最好是在页面卸载前通过onunload事件处理程序移除所有事件处理程序
模拟事件
开发人员可以在任意时刻触发特定的事件,就如同浏览器创建的事件一样,可以正常冒泡
DOM中事件模拟
可以在document对象上使用createEvent()方法创建event对象,接收一个表示要创建的事件类型的字符串,在DOM2级中,这些字符串都使用英文复数形式,在DOM3级中变成了单数
UIEvents(UIEvent):一般化的UI事件,鼠标事件和键盘事件都继承自UI事件
MouseEvents(MouseEvent):一般化的鼠标事件
MutationEvents(MutationEvent):一般化的DOM变动事件
HTMLEvents:一般化的HTML事件,没有对应的DOM3级事件(HTML事件被分散到其他类别中)
“DOM2级事件”没有规定键盘事件,“DOM3级事件”给出了规定,IE9是目前唯一支持DOM3级键盘事件的浏览器
创建event对象后,每种类型的event对象都有一个特殊的方法,需要给这个方法传入适当的数据初始化该event对象,不同类型的event对象方法名称也不一样
最后一步是触发事件,使用dispatchEvent()方法,它需要传入一个参数,即表示要触发事件的event对象
模拟鼠标事件
createEvent()传入字符串“MouseEvents”,返回的对象有一个initMouseEvent()方法,接收15个参数
type(字符串)要触发的事件类型,click
bubbles(布尔值)是否可以冒泡
cancelable(布尔值)是否可以取消
view(AbstractView)与事件关联的视图,几乎总是设置为document.defaultView
detail(整数)与事件有关的详细信息,这个值一般只有事件处理程序使用,通常为0
screenX(整数)事件相对于屏幕的X坐标
screenY(整数)事件相对于屏幕的Y坐标
clientX(整数)事件相对于视口的X坐标
clientY(整数)事件相对于视口的Y坐标
ctrlKey(布尔值)是否按下了Ctrl键,默认为false
altKey(布尔值)是否按下了Alt键,默认为false
shiftKey(布尔值)是否按下了Shift键,默认为false
metaKey(布尔值)是否按下了Meta键,默认为false
button(整数)按下了哪一个鼠标键,默认为0
relatedTarget(对象)与事件相关的对象,只在模拟mouseover或mouseout时使用
(续下一篇)
JavaScript高级程序设计50.pdf的更多相关文章
- JavaScript高级程序设计53.pdf
共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...
- JavaScript高级程序设计61.pdf
JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...
- JavaScript高级程序设计60.pdf
错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...
- JavaScript高级程序设计58.pdf
15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...
- JavaScript高级程序设计57.pdf
表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...
- JavaScript高级程序设计55.pdf
输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...
- JavaScript高级程序设计54.pdf
过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...
- JavaScript高级程序设计52.pdf
表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HT ...
- JavaScript高级程序设计49.pdf
HTML5事件 contextmenu事件 contextmenu事件是冒泡的,可以将事件处理程序指定到document,这个事件的目标是用户操作的元素,在兼容DOM的浏览器中使用event.prev ...
随机推荐
- 【BZOJ1042】【DP + 容斥】[HAOI2008]硬币购物
Description 硬币购物一共有4种硬币.面值分别为c1,c2,c3,c4.某人去商店买东西,去了tot次.每次带di枚ci硬币,买si的价值的东西.请问每次有多少种付款方法. Input 第一 ...
- 数据结构学习——shell排序的C语言实现
shell排序: 这个排序的命名是来自发明者的名字,和排序的方法没有字面上的联系.所以不要因为名字而感觉很难.在K&R的C程序设计语言中书中只用了几行代码很简洁的实现了这个排序算法.那就来看看 ...
- iframe 的基本操作
要在服务器环境下才行 1.iframe 下操作父页面window.parent.document.getElementById //全部支持window.top //最顶层ie 下的iframe的on ...
- 【转】JSONP简介
原文链接:说说JSON和JSONP,也许你会豁然开朗,含jQuery用例 先说说JSONP是怎么产生的: 1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面. ...
- DIV+CSS 网页布局之:三列布局
1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...
- php缓存相关
在php运行期间,php引擎要对php源码进行处理,(词法分析,语法分析等)然后生成opcode. 然后再运行.在这个阶段可以把opcode缓存起来,当下次需要运行这段程序的时候,就避免了再次 进行词 ...
- MySQL数据库的热备份和冷备份
冷备份(off, 慢, 时间点上恢复)冷备份发生在数据库已经正常关闭的情况下,当正常关闭时会提供给我们一个完整的数据库.冷备份是将关键性文件拷贝到另外位置的一种说法.对于备份数据库信息而言,冷备份是最 ...
- hadoop2——新MapReduces——yarm详解
YARN总体上仍然是Master/Slave结构,在整个资源管理框架中,ResourceManager为Master,NodeManager为Slave,ResourceManager负责对各个Nod ...
- odoo 的 拉式 和 推式 库链
推式链的数据定义在 stock.location.path 表,视图定义在 “路线” 界面的 “push rules” 具体可参考 入库设置为 Receipt in 2 steps . push ...
- 【WPF】Dispatcher及线程操作
WPF 应用程序启动后,会有两个线程: 1. 一个是用来处理UI呈现(处理UI的请求,比如输入和展现等操作). 2. 一个用来管理 UI的 (对UI元素及整个UI进行管理). 像Winform一样,W ...