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代码耦合太过紧密不利于维护
最新文章
- matlab画图函数plot()/set/legend
- SVN:服务器资源删掉,本地添加时和删掉的名字同名出现One or more files are in a conflicted state.
- Knockout.js随手记(5)
- TRIM函数
- linux中压缩与解压缩命令小结
- WordPress Bradesco Gateway插件‘falha.php’跨站脚本漏洞
- Sliverlight实例之 使用 ControlTemplate 自定义按钮的外观
- mysql 插入字段 字符串
- tomcat 控制台中文乱码问题
- Vue.js——vue-resource
- Conv1D、Conv2D、Conv3D
- cocos-lua3.17 Lua tablrView工具类
- Centos7上安装mariadb
- Nginx+Keeplived双机热备(主从模式)
- 外网teamview连接不上服务器teamview的错误: 一直显示正在连接,正在初始化显示参数的
- JAVA虚拟机关闭钩子(Shutdown Hook)
- Python 字符串(count)
- PLSQL创建DBLINK
- SVN中图标符号的含义
- SSM实现图片上传管理操作