vue中的$event,vue中event和$event区别
本文介绍了Vue中的事件对象，并通过示例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。
一、什么是event对象
Event:表示事件的状态。例如，获取当前元素：e.Target
二、事件冒泡
什么是事件冒泡？百度的解释如下：
当事件发生时，它将开始传播(从内向外或从外向内)。为什么要传播？因为事件源本身(很可能)没有处理事件的能力，也就是处理事件的函数(方法)没有绑定到事件源。比如我们点击一个按钮，会产生一个点击事件，但是按钮本身可能无法处理这个事件。事件必须从按钮向外展开，才能到达可以处理这个事件的代码(比如我们给按钮的onclick属性赋一个函数名，也就是让这个函数处理按钮的click事件)，或者按钮的父级绑定了一个事件函数。当按钮上发生click事件时，按钮本身并没有事件处理功能，所以会传播到父级。
以下可能的例子将更容易理解：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
事件气泡/标题
！-介绍vue.js -
脚本src= node _ modules/vue/dist/vue . js /script
脚本
window.onload=function(){
//构建一个vue实例
新Vue({
艾尔：“#我的”，
数据：{
},
//方法
方法：{
play1:function(){
console . log( My div 1 )；
},
play2:函数(){
console . log( My div 2 )；
},
play3:函数(){
console . log( My div 3 )；
}
}
})
}
/脚本
/头
身体
div id=我的
Div @click=play1 我的div1
Div @click=play2 我的div2
div @click=play3
我的div3
/div
/div
/div
/div
/body
/html
效果：
在上面的代码中，三个div被绑定到三个不同的事件。当您点击“我的div 3”时
那么如何阻止事件冒泡呢？
1、原始JS中的处理方法
代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
事件气泡/标题
！-介绍vue.js -
脚本src= node _ modules/vue/dist/vue . js /script
脚本
window.onload=function(){
//构建一个vue实例
新Vue({
艾尔：“#我的”，
数据：{
},
//方法
方法：{
play1:function(){
console . log( My div 1 )；
},
play2:函数(){
console . log( My div 2 )；
},
play3:功能(e){
console . log( My div 3 )；
e .停止传播()；
}
}
})
}
/脚本
/头
身体
div id=我的
Div @click=play1 我的div1
Div @click=play2 我的div2
div @click=play3($event)
我的div3
/div
/div
/div
/div
/body
/html
效果：
2、vue中处理方法
代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题事件冒泡/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
//构建某视频剪辑软件实例
新Vue({
艾尔："#我的",
数据：{
},
//方法
方法：{
play1:function(){
console.log(我的div 1’)；
},
游戏2:函数(){
console.log(我的div 2’)；
},
游戏3:功能(e){
console.log(我的div 3’)；
//e .停止传播()；
}
}
})
}
/脚本
/头
身体
div id=我的
div @click=play1 我的div1
div @click=play2 我的div2
div @click=play3($event)
我的div3
/div
！- Vue中使用事件修饰符阻止冒泡-
div @click.stop=play3($event)
我的div4
/div
/div
/div
/div
/body
/html
效果：
点击我的 div4 的时候会阻止事件冒泡，但点击我的 div3 的时候不会阻止事件冒泡。
三、事件的默认动作
看下面的代码示例：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题事件冒泡/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
//构建某视频剪辑软件实例
新Vue({
艾尔："#我的",
数据：{
},
//方法
方法：{
play1:function(){
console.log(我的div 1’)；
},
游戏2:函数(){
console.log(我的div 2’)；
},
游戏3:功能(e){
console.log(我的div 3’)；
//e .停止传播()；
},
游戏4:功能(e){
console.log(我是超链接);
}
}
})
}
/脚本
/头
身体
div id=我的
div @click=play1 我的div1
div @click=play2 我的div2
div @click=play3($event)
我的div3
/div
！- Vue中使用事件修饰符阻止冒泡-
div @click.stop=play3($event)
我的div4
/div
a href= http://www。百度一下。com rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 @ click= play 4($ event) click/a
/div
/div
/div
/body
/html
效果：
点击"点击"的时候会发现页面跳转到了百度，不会进入play4事件，如果调试代码想进入play4事件该如何处理呢？
1、使用原生JS处理
代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题事件冒泡/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
//构建某视频剪辑软件实例
新Vue({
艾尔："#我的",
数据：{
},
//方法
方法：{
play1:function(){
console.log(我的div 1’)；
},
游戏2:函数(){
console.log(我的div 2’)；
},
游戏3:功能(e){
console.log(我的div 3’)；
//e .停止传播()；
},
游戏4:功能(e){
console.log(我是超链接);
//取消事件的默认动作
e。防止默认()；
}
}
})
}
/脚本
/头
身体
div id=我的
div @click=play1 我的div1
div @click=play2 我的div2
div @click=play3($event)
我的div3
/div
！- Vue中使用事件修饰符阻止冒泡-
div @click.stop=play3($event)
我的div4
/div
a href= http://www。百度一下。com rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 @ click= play 4($ event) click/a
/div
/div
/div
/body
/html
效果：
这里在点击"点击"的时候就不会进入百度首页了。这里没有处理冒泡，所以会触发游戏2和播放一事件。
2、使用vue处理
代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题事件冒泡/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
//构建某视频剪辑软件实例
新Vue({
艾尔："#我的",
数据：{
},
//方法
方法：{
play1:function(){
console.log(我的div 1’)；
},
游戏2:函数(){
console.log(我的div 2’)；
},
游戏3:功能(e){
console.log(我的div 3’)；
//e .停止传播()；
},
游戏4:功能(e){
console.log(我是超链接);
//取消事件的默认动作
//e .防止默认()；
}
}
})
}
/脚本
/头
身体
div id=我的
div @click=play1 我的div1
div @click=play2 我的div2
div @click=play3($event)
我的div3
/div
！- Vue中使用事件修饰符阻止冒泡-
div @click.stop=play3($event)
我的div4
/div
a href= http://www。百度一下。com rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 @ click= play 4($ event) click/a
！-使用某视频剪辑软件处理-
a href= http://www。百度一下。com rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 @ click。预防。stop= play 4($ event) click 2/a
/div
/div
/div
/body
/html
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。