浅谈---事件冒泡--事件捕获--Vue2.0中的capture
前言
本文主要介绍 事件冒泡 和 事件捕获 以及Vue中的capture
主要内容
事件捕获
含义:从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发,也就是说事件从最上一级元素开始往下查找,直到捕获到事件目标(target)。
直白点:事件触发顺序 父元素->子元素
事件冒泡
含义:从最不精确的对象(document 对象)开始触发,然后到最精确对象(也可以在窗口级别捕获事件,不过必须由开发人员特别指定),也就是说事件从事件目标(target)开始,往上冒泡直到页面的最上一级元素。
直白点:事件触发顺序 子元素->父元素
事件冒泡和事件捕获-图解
W3C标准事件监听
W3C标准事件监听其实是事件冒泡和事件捕获的混合体,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。
使用`addEventListener函数`可以自由选择事件冒泡和事件捕获
element.addEventListener(event-name, callback, use-capture);
表示在 element 这个对象上面添加一个事件监听器,当监听到有 event-name 事件发生的时候,调用 callback 这个回调函数。 use-capture 这个参数,表示该事件监听是在“捕获”阶段中监听(设置为 true)还是在“冒泡”阶段中监听(设置为 false)。
Vue2.0中的capture
代码直接粘走执行,效果很明了
在冒泡阶段中监听事件(默认)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 20px;
transition: background 800ms;
}
ul {
height: 100%;
list-style: none;
background: hsl(193, 66%, 85%);
}
li {
height: 100%;
background: hsl(193, 66%, 95%);
}
.highlight {
background: red;
}
</style>
</head>
<body>
<div id="app">
<ul @click="callback($event)">
<li @click="callback($event)">One</li>
<ul @click="callback($event)">
<li @click="callback($event)">Two</li>
<ul @click="callback($event)">
<li @click="callback($event)">Three. Click Me!!!</li>
</ul>
</ul>
</ul>
</div>
<script>
var pause = 200;
new Vue({
el: "#app",
methods: {
callback(event) {
var ms = event.timeout = (event.timeout + pause) || 0;
var target = event.currentTarget;
console.log(target);
setTimeout(function() {
target.classList.add('highlight');
setTimeout(function() {
target.classList.remove('highlight');
}, pause);
}, ms);
}
}
})
</script>
</body>
</html>
添加修饰符.capture
后 在捕获阶段中监听事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 20px;
transition: background 800ms;
}
ul {
height: 100%;
list-style: none;
background: hsl(193, 66%, 85%);
}
li {
height: 100%;
background: hsl(193, 66%, 95%);
}
.highlight {
background: red;
}
</style>
</head>
<body>
<div id="app">
<ul @click="callback($event)">
<li @click="callback($event)">One</li>
<ul @click="callback($event)">
<li @click="callback($event)">Two</li>
<ul @click="callback($event)">
<li @click="callback($event)">Three. Click Me!!!</li>
</ul>
</ul>
</ul>
</div>
<script>
var pause = 200;
new Vue({
el: "#app",
methods: {
callback(event) {
var ms = event.timeout = (event.timeout + pause) || 0;
var target = event.currentTarget;
console.log(target);
setTimeout(function() {
target.classList.add('highlight');
setTimeout(function() {
target.classList.remove('highlight');
}, pause);
}, ms);
}
}
})
</script>
</body>
</html>
在Vue.js中,我们用修饰符来达到事件监听是捕获还是冒泡阶段中监听的效果。
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
意思就是不加.capture是事件冒泡,加上.capture就是事件捕获
最后
首先能帮到你最好,写的不对的地方也请多多见谅,请帮我指正出来,欢迎大牛们来!!!
差点忘了
要是对你有帮助,或者觉着写的还可以,可以 推荐和收藏!
3Q!
小慢车
新司机,车速慢
推荐阅读
webpack入门
npm init -y 生成packge.json。npm i webpack webpack-cli -D,这时候可以npx webpack打包。packge.json文件script中加入 {代码...} 新建webpack.config.js {代码...} 配置完这2个文件就可以直接 npm run dev打包...
青棘阅读 786
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...
乌柏木赞 143阅读 12k评论 10
从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...
乌柏木赞 60阅读 6k评论 16
再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...
libinfs赞 39阅读 6.2k评论 12
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...
乌柏木赞 41阅读 7.1k评论 6
【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...
Jerry赞 35阅读 2.9k
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...
乌柏木赞 32阅读 6.1k评论 9
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。