JavaScript高级程序设计39.pdf
第13章 事件
JavaScript与HTML之间的交互式通过事件来实现的。
事件流
事件流描述的是从页面中接收事件的顺序,IE和Netscape提出了完全相反的事件流概念,IE是事件冒泡流,Netscape是事件捕获流
事件冒泡
click一个<div>元素,click事件沿DOM树向上传播,在每一级节点都会发生,直至传播到document对象,现代浏览器则将事件冒泡到window对象
事件捕获
click一个<div>元素,click事件沿DOM树依次向下,直到传播到事件的实际目标,即<div>元素,IE9及其他浏览器都支持这种事件流模型,“DOM2级事件”规范要求事件从document对象开始传播,但这些浏览器都是从window对象开始捕获事件的
由于老版本浏览器不支持,很少人使用事件捕获
DOM事件流
“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段,即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件目标,但IE9及其他现代浏览器都会在捕获阶段触发事件对象上的事件,结果就有2个机会在目标对象上面操作事件
IE8及之前版本不支持DOM事件流
事件处理程序
响应某个事件的函数就叫做事件处理程序(或事件侦听器),事件处理程序名字以“on”开头,click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload
HTML事件处理程序
某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定,这个特性的值应该是能够执行的JavaScript代码:
<input type="button" value="click me" onclick="alert('Clicked')"/>
由于这个值是JavaScript,因此不能在其中使用未经转义的HTML语法字符,例如&、""、<、>
HTML中定义的事件处理程序可以是具体动作,也可以调用在页面其他地方定义的脚本
<input type="button" value="click me" onclick="showMessage()"/>
这样指定事件处理程序有一些独到之处,会创建一个封装着元素属性值的函数,这个函数中有一个局部变量event,也就是事件对象
<input type="button" value="click me" onclick="alert(event.type)"/>
在这个函数内部,this的值等于事件的目标元素
<input type="button" value="click me" onclick="alert(this.value)"/>
这个动态创建的函数,另一个有意思的地方是它扩展作用域的方式。在这个函数内部,可以像访问局部变量一样访问document及该元素本身的成员,这个函数使用with像下面这样扩展作用域:
function(){
with(document){
with(this){
//元素的属性值
}
}
}
事件处理程序访问自己的属性就简单多了
<input type="button" value="click me" onclick="alert(value)"/>
如果当前元素是一个表单输入元素,则作用域中还会包含访问表单元素(父元素)的入口
function(){
with(document){
with(this.form){
with(this){
//元素的属性值
}
}
}
}
这样扩展作用域,事件处理程序无需引用表单元素就能访问其他表单字段
HTML中指定事件处理程序有两个缺点
事件处理程序未加载完毕就触发相应事件,会引发错误,将其封装在try-catch块中
<input type="button" value="click me" onclick="try{showMessage();}catch(ex){}">
另一个缺点是,扩展事件处理程序的作用域在不同浏览器中会导致不同的结果,容易出错。
并且HTML与JavaScript代码耦合太过紧密不利于维护
JavaScript高级程序设计39.pdf的更多相关文章
- 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高级程序设计53.pdf
共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...
- JavaScript高级程序设计52.pdf
表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HT ...
- JavaScript高级程序设计50.pdf
hashchange事件 HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发 ...
随机推荐
- 挂载磁盘的问题(/dev/sdb1 is apparently in use by the system; will not make a 文件系统 here!)
用fdisk给新磁盘分区后.然后要创建文件系统 [root@cuizhipeng ~]# mkfs.ext4 /dev/sdb1mke2fs 1.41.12 (17-May-2010)/dev/sdb ...
- 4MLinux7.0 服务器配置详解 别名TheSSS
TheSSS download 特性:thttp,php5.5.1,mysql,vsftp,proxy,firewall,带rpm管理器.更新频繁. 官方帮助文件:View (新窗口打开) 发现国内4 ...
- Swift语言 1小时速学教程
本文由 张渊杰 (网名寂静)编写 Swift语言 1小时速学教程 写在前面的话 有些人可能想, 呵呵, 1小时学一门语言, 你不是搞笑吧, 我想说, 是的, 完全可以, 就要看你怎么学了 要想在1小时 ...
- PHP-Wamp集成包安装教程
在Windows平台上搭建PHP的开发环境可以下载WAMP(Windows.Apache.MySQL.PHP的首字母缩写)集成化安装包.这样就不需要单独安装Apache.MySQL和PHP了. 这款软 ...
- setTimeout和setInterval的深入理解
以前写的setTimeout和setInterval的文章有些不足之处,今天抽时间整理了一下,要想真正理解还得从javascript的单线程机制说起 大概半年前发表过一篇关于setTimeout和se ...
- FastCgi与PHP-fpm关系[转] 读完本文瞬间明朗了很多
刚开始对这个问题我也挺纠结的,看了<HTTP权威指南>后,感觉清晰了不少. 首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. ...
- utube视频落地
utube视频落地 简单粗暴的方法: 利用视频下载网站的网页版进行处理. 比如需要下载的视频的url是vid_url, 需要用到的web服务的url是web_service vid_url='http ...
- Java集合类操作优化总结
清单 1.集合类之间关系 Collection├List│├LinkedList│├ArrayList│└Vector│ └Stack└SetMap├Hashtable├HashMap└WeakHas ...
- C语言写解一元二次方程程序心得
前言:在网上看到不少解一元二次方程的小程序,在使用时总得出一大堆小数,感觉很不爽,遂自己重新写了一遍. 首先,先回忆一下一元二次方程的求根公式: 分别读取二次项.一次项和常数项系数并且求出delta ...
- delphi xe5 android 开发实现手机打电话和发短信
转载自 http://www.raysoftware.cn/ 其实都可以通过intent和URI调用系统功能.Windows程序员可以理解成是ShellExecute.这个是万金油.可以有调用各种功 ...