学习JavaScript事件流和事件处理程序


Posted in Javascript onJanuary 25, 2016

本文全篇介绍了JavaScript事件流和事件处理程序,分享给大家供大家参考,具体内容如下

一、事件流

事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流。

二、事件冒泡

即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。如:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
</head>
<body>
 <div>Click</div>
</body>
</html>

当点击了页面中的div元素,那么这个click事件会按照如下顺序传播:

  • div元素
  • body元素
  • html元素
  • document对象

三、事件捕获

事件捕获的思想是最具体的节点应该最后接收到事件。事件捕获的用意在于事件到达目标之前捕获它。

当点击了页面中的div元素,那么这个click事件则会按照如下顺序传播:

  • document对象
  • html标签
  • body标签
  • div标签

虽然规范要求事件应该从document对象开始传播,但浏览器一般都是从window对象开始捕获事件的。因为老版本浏览器不支持,所以一般都使用事件冒泡。

四、DOM事件流

“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段事件冒泡阶段

在DOM事件流中,实际的目标在捕获阶段不会接收事件。就是说在捕获阶段,事件从document到html再到body后就停止了。下一个阶段是“处于目标”阶段,于是事件在div中发生,并在事件处理中被看成是冒泡阶段的一部分。然后,冒泡阶段发生。IE8及更早的版本不支持DOM事件流,浏览器在捕获阶段触发事件对象上的事件,结果就是有两个机会在目标对象上面操作事件。

五、事件处理程序

事件就是用户或浏览器自身执行的某种动作;事件处理程序(或事件侦听器)就是响应某个事件的函数。事件处理程序的名字以“on”开头,如onload、onclick等。

六、HTML事件处理程序

若要在按钮被单击时执行一些js代码,可以这样编写:

<div onclick="alert('Clicked')">Click</div>

注意:不能在其中使用未经转义的HTML语法字符。

也可以调用在页面中其他地方定义的脚本:

<script>
 function showMessage () {
  document.write("fdas");
 }
</script>
<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)" />

HTML事件处理程序存在众多问题,所以应该使用js指定的事件处理程序

七、DOM0级事件处理程序

要使用js指定事件处理程序,首先必须取得一个要操作的对象的引用。

每个元素都有自己的事件处理程序属性,这些属性通常全部小写,如onclick。如:

<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
 console.log("hello");
}
</script>

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此,这时候的事件处理程序是在元素的作用域中运行的;也就是this引用当前元素:

<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
 console.log(this.type);
}
</script>

以上述这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

删除通过DOM0级方法指定的事件处理程序:

btn.onclick = null;

八、DOM2级事件处理程序

addEventListener()

该方法接收三个参数:要处理的事件名、事件处理程序函数和布尔值;布尔值如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。如:

var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
 console.log(this.id);
})

还可以为该按钮添加多个事件处理程序,如:

var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
  console.log(this.id);
})
btn.addEventListener("click", function () {
  console.log(this.value);
})

removeEventListener()

var btn = document.getElementById("btn");
function info () {
  console.log(this.value);
}
btn.addEventListener("click", info);
btn.addEventListener("click", function () {
  console.log(this.id);
});
btn.addEventListener("click", function valueAndId () {
  console.log(this.value + " " + this.id);
});
btn.removeEventListener("click", info); //有效
btn.removeEventListener("click", function () {
  console.log(this.id);
}); //无效
btn.removeEventListener("click", valueAndId); //报错无效

大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样就可以最大限度地兼容各种浏览器。

以上就是关于JavaScript事件流和事件处理程序的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
javascript产生随机数方法汇总
Jan 25 #Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 #Javascript
理解JavaScript表单的基础知识
Jan 25 #Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 #Javascript
JavaScript数组的一些奇葩行为
Jan 25 #Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 #Javascript
详解js私有作用域中创建特权方法
Jan 25 #Javascript
You might like
虫族 Zerg 热键控制
2020/03/14 星际争霸
德生PL330测评
2021/03/02 无线电
PHP 中的一些经验积累
2006/10/09 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
zbar解码二维码和条形码示例
2014/02/07 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
优秀团员个人的自我评价
2013/10/02 职场文书
自考生毕业自我鉴定
2013/10/10 职场文书
个人事迹材料范文
2014/12/29 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis