JavaScript常见事件源与事件流的获取方法及解析
事件源
在事件中，当前操作的那个元素就是事件源。比如网页元素中 input 有 onclick 事件，当点击 input 发送 onclic 事件时，事件源就是 input。
常见事件源：
| (鼠标) 事件 | 描述 |
|---|---|
| onclick | 鼠标单击对象时触发 |
| ondblclick | 鼠标双击对象时触发 |
| onmousedown | 鼠标按钮被按下时触发 |
| onmousemove | 鼠标被移动时触发 |
| onmouseout | 鼠标离开监听该事件的元素或子元素时触发 |
| onmouseover | 鼠标移动到监听该事件的元素或子元素时触发 |
| onmouseup | 鼠标松开时触发 |
| (键盘) 事件 | 描述 |
|---|---|
| onkeydown | 键盘按下 |
| keypress | 键盘按住 |
| keyup | 键盘松开 |
| (表单控件) 事件 | 描述 |
|---|---|
| onblur | 失去焦点 |
| onfocus | 获取焦点 |
| oninput | 输入 |
| onchange | 改变 |
| onsubmit | 提交 |
| onreset | 重置 |
| (页面) 事件 | 描述 |
|---|---|
| onload | 页面加载结束 |
| onscroll | 滚动 |
| onresize | 改变大小 |
获取事件源
事件源是作为event对象的属性存在的。在W3C规范中，这个属性是 target ；但是 IE8.0 及其以下版本不支持该属性，它使用 srcElement 属性来获取事件源。
<html>
<head>
<title>获取事件源</title>
</head>
<body>
<div id="demo">点击这里</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(e){
var eve = e || window.event;
var srcNode = eve.target || eve.srcElement; // 兼容所有浏览器
alert(srcNode);
}
</script>
</body>
</html>事件流：
描述的是从页面中接收事件的顺序，也可以理解为事件的传播顺序。
DOM事件流存在的三个阶段：
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
事件捕获（event capturing）：当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。
DOM标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。
不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。
target 和 currentTarget
- target是触发事件的某个具体的对象，只会出现在事件机制的目标阶段，即"谁触发了事件，谁就是target"。
- currentTarget是绑定了当前事件类型的对象，有可能是目标节点的祖先节点。
阻止事件在冒泡阶段传播
event.stopPropagation //阻止事件在冒泡阶段传播
<!-- 例子结构 --> <div id="outer"> <p id="inner"></p> </div>
/**
* 点击#inner之后会发生如下过程:
* outer捕获阶段
* inner 一
* inner 二
* inner 三
*/
const inner = document.querySelector('#inner');
const outer = document.querySelector('#outer');
inner.addEventListener("click", event => {
console.log("inner 一");
}, false);
inner.addEventListener("click", event => {
console.log("inner 二");
event.stopPropagation();
}, false);
inner.addEventListener("click",event => {
console.log("inner 三");
}, false);
outer.addEventListener("click", event => {
console.log("outer捕获阶段");
}, false);
outer.addEventListener("click", event => {
console.log("outer冒泡阶段");
}, false);如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了event.stopImmediatePropagation()方法，则当前元素剩下的监听函数将不会被执行，并且阻止事件在冒泡阶段传播。
/**
* 点击#inner之后会发生如下过程:
* outer捕获阶段
* inner 一
* inner 二
*/
const inner = document.querySelector('#inner');
const outer = document.querySelector('#outer');
inner.addEventListener("click", (event) => {
console.log("inner 一");
}, false);
inner.addEventListener("click", (event) => {
console.log("inner 二");
event.stopImmediatePropagation();
}, false);
inner.addEventListener("click",(event) => {
console.log("inner 三");
}, false);
outer.addEventListener("click", event => {
console.log("outer捕获阶段");
}, false);
outer.addEventListener("click", event => {
console.log("outer冒泡阶段");
}, false);以上就是JavaScript常见事件源与事件流的获取方法及解析的详细内容，更多关于JavaScript事件源事件流的资料请关注脚本之家其它相关文章！
相关文章
今天小编就为大家分享一篇Layui数据表格判断编辑输入的值,是否为我需要的类型详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
本篇文章通过例举代码分析的方式给大家讲解了JavaScript数组操作难点以及需要注意的地方，一起学习参考下吧。2017-12-12
Foo.getName算是一道比较老的面试题了,大致百度了一下在17年就有相关文章在介绍它,下面这篇文章主要给大家介绍了关于一道超经典js面试题Foo.getName()的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了使用80 行 JS 代码实现页面添加水印：文字水印、多行文字水印、图片水印、文字&图片水印,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-05-05
算法是计算机算法即计算机能够执行的算法,只有明确了算法后,才能使应用程序实现某些功能,所以通常人们会将算法称为程序的灵魂,下面这篇文章主要给大家分享介绍了一些超实用的JS常用算法的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了JS未跨域操作iframe里的DOM 的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
Bootbox.js 是一个小型的 JavaScript 库用来创建简单的可编程对话框，基于 Twitter 的 Bootstrap 开发。今天我们就来研究下，如何使用bootbox插件来实现自定义弹窗。2015-04-04
这篇文章主要为大家详细介绍了小程序实现简单分页组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家详细介绍了Bootstrap警告（Alerts）的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，否则就都乱套了2016-12-12
最新评论