当前位置：首页 > wzjs >正文

一般网站建设公司怎么收费计算机应用专业(网站开发)

wzjs 2025/9/15 23:28:37

一般网站建设公司怎么收费,计算机应用专业(网站开发),个人网站怎么推广,公司如何进行网络推广文章目录 1、事件流2、事件捕获3、事件捕获4、阻止冒泡5、解绑事件6、鼠标经过事件的区别7、两种事件注册语法的区别 1、事件流先举个形象的例子：你去西安大雁塔旅游出发找目的地时：先从你家出发，到陕西省西安市，再到雁塔区&a…

文章目录

1、事件流
2、事件捕获
3、事件捕获
4、阻止冒泡
5、解绑事件
6、鼠标经过事件的区别
7、两种事件注册语法的区别

1、事件流

先举个形象的例子：你去西安大雁塔旅游

出发找目的地时：先从你家出发，到陕西省西安市，再到雁塔区，最后到达大雁塔（捕获阶段）
回家时：大雁塔出发，出雁塔区，再出陕西省西安市，再到你家（冒泡阶段）

对比给div绑定一个点击事件，当事件被触发时：会经历两个阶段，分别是捕获阶段、冒泡阶段，事件流则指的是事件完整执行过程中的这个流动路径

在这里插入图片描述

如上，捕获即先从Document对象出发，到html再到body标签，最后找到div标签

捕获阶段是从父到子
冒泡阶段是从子到父

2、事件捕获

事件捕获即从DOM的根元素开始去执行对应的事件 (从外到里)，语法：

在这里插入图片描述

addEventListener第三个参数传入 true 代表是捕获阶段触发(很少使用)
若传入false代表冒泡阶段触发，默认就是false
若是用 L0 事件监听，则只有冒泡阶段，没有捕获

// L0语法回顾，已过时
<button id="myButton">Click Me</button>
<script>const button = document.getElementById('myButton');button.onclick = function() {alert('Button clicked!');};
</script>

事件捕获效果演示：用一个div嵌套一个div，加上document对象，形成爷爷、父亲、儿子链路

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {/* w500+h500+bgc快速生成 */width: 500px;height: 500px;background-color: greenyellow;}.son {width: 200px;height: 200px;background-color: red;}</style>
</head><body><!-- .father>.son快速生成 --><div class="father"><div class="son"></div></div><script>document.addEventListener('click', function () {alert('这是爷爷元素document触发的')}, true)const father = document.querySelector('.father')const son = document.querySelector('.son')father.addEventListener('click', function () {alert('这是父亲元素father触发的')}, true)son.addEventListener('click', function () {alert('这是儿子元素son触发的')}, true)</script>
</body></html>

在这里插入图片描述

此时，点击红色的儿子元素部分，因为红色部分也属于绿色的父亲div，更属于整个document，所以三个点击事件都触发，但因为现在addEventListener是true，所以，是事件捕获，从document到父div再到子div，因此，效果是：弹窗依次从父元素到子元素

在这里插入图片描述

3、事件捕获

此时，改成第三个参数不传，即冒泡阶段

在这里插入图片描述

那弹窗的触发顺序就是子到父：

// 结果依次为：
这是儿子元素son触发的
这是父亲元素father触发的
这是爷爷元素document触发的

事件冒泡🫧：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发

当一个元素触发事件后， 会依次向上调用所有父级元素的同名事件，比如例子里的都是click事件，如果是父级元素，但是keyup事件，那依然不会冒泡🫧
事件冒泡是默认存在的
L2事件监听第三个参数是 false，或者默认都是冒泡

4、阻止冒泡

默认就有冒泡阶段，所以容易导致影响到父级元素的同名事件，此时，就需要阻止冒泡阶段，让这个事件仅对当前元素对象生效：

阻止事件冒泡需要拿到事件对象
语法：

在这里插入图片描述

注意⚠️，这个方法是阻止流动，即同时阻止了捕获阶段和冒泡阶段，但捕获阶段一般开发不用，因此，这个方法常常用来做阻止冒泡，同样用上面的例子，代码改为：

在这里插入图片描述

此时，只会有一个弹窗，其父级元素的同名事件将被阻止：

在这里插入图片描述

5、解绑事件

事件绑定后，还可以解绑：

传统L0语法下，也就是on事件的语法，直接使用null覆盖实现事件解绑

在这里插入图片描述

addEventListener的语法，解绑事件通过：removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])，因此，如下，匿名函数无法被解绑

在这里插入图片描述

举例：一次性点击

<body><button>一次性点击</button><script>const btn = document.querySelector('button')btn.onclick = function() {alert('点击了')// 点击一次后就解除绑定，实现一次性点击, L0语法btn.onclick = null}</script>
</body>

当前语法：

<body><button>一次性点击</button><script>const btn = document.querySelector('button')function fn() {alert('点击了')btn.removeEventListener('click', fn)}btn.addEventListener('click', fn)</script>
</body>

6、鼠标经过事件的区别

mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果 (推荐)

看下mouseover 和 mouseout的事件冒泡效果：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {/* w500+h500+bgc快速生成 */width: 500px;height: 500px;background-color: greenyellow;}.son {width: 200px;height: 200px;background-color: purple;}</style>
</head><body><!-- .father>.son快速生成 --><div class="father"><div class="son"></div></div><script>const father = document.querySelector('.father')// 只给father绑定事件father.addEventListener('mouseover', function () {console.log('鼠标经过')})father.addEventListener('mouseout', function (e) {console.log('鼠标离开')})</script>
</body></html>