学习JavaScript事件流和事件处理程序
本文全篇介绍了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事件流和事件处理程序的全部内容，希望对大家的学习有所帮助。
相关文章
这篇文章主要介绍了微信小程序实现横向滚动导航栏效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
首先呢，Promise是异步中比较重要的知识点，学习的最好方法就是掌握它的基本原理。所以这一篇主要说一下如何用JS来实现一个自己的promise2022-10-10
D类库是以为当前成熟框架、类库开发辅助类库的目标而被开发。2010-10-10
createElement与createDocumentFragment的点点区别小结
在DOM操作里，createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段2011-12-12
三剑客：offset、client和scroll还傻傻分不清？
这篇文章主要给大家介绍了三剑客：offset，client和scroll的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
全面解析JS字符串和正则表达式中的match、replace、exec等函数
这篇文章主要介绍了全面解析JS字符串和正则表达式中的match、replace、exec等函数的相关资料,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了JS获取多维数组中相同键的值实现方法,结合实例形式分析了JS数组遍历、判断、键值获取等操作技巧,需要的朋友可以参考下2017-01-01
在实际开发中我们会遇到不确定高度的情况,那么在uniapp中我们如何获取区域的高度呐?这篇文章主要给大家介绍了关于uniapp获取页面高度与元素高度的相关资料,需要的朋友可以参考下2023-09-09
鼠标放到指定的行上自动弹出当前的个数，从0开始，这个功能方便我们在tab切换中定位2008-10-10
javascript实现数组内值索引随机化及创建随机数组的方法
这篇文章主要介绍了javascript实现数组内值索引随机化及创建随机数组的方法,涉及javascript数组索引及随机数的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
最新评论