学习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 相关文章推荐
jQuery 处理表单元素的代码
Feb 15 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 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
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php调用C代码的实现方法
2014/03/11 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
JS 常用校验函数
2009/03/26 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
深入浅析python继承问题
2016/05/29 Python
pandas 将索引值相加的方法
2018/11/15 Python
Python安装whl文件过程图解
2020/02/18 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
个人批评与自我批评
2014/10/15 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL