03事件修饰符

最新推荐文章于 2024-04-04 11:02:50 发布

学习总不晚

最新推荐文章于 2024-04-04 11:02:50 发布

阅读量168

点赞数

分类专栏： Vue 文章标签： Vue事件修饰符

本文链接：https://blog.csdn.net/u013472738/article/details/100176241

版权

Vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

直接划重点

.stop: 阻止冒泡
.prevent: 阻止默认事件
.capture: 添加事件监听器时使用事件捕获模式
.self: 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once: 事件只能触发一次

上牛百叶：添加案例说明

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件修饰符</title>
    <script src="./lib/vue-2.6.10.js"></script>

    <style>
        #div1 {
            height: 150px;
            background-color: red;

        }

        #div2Input {
            background-color: blue;
            height: 50px;

        }
    </style>
</head>

<body>
    <div id="app">

        <!-- 事件修饰符 
.stop : 阻止冒泡； 
.prevent 阻止默认事件
.capture 添加事件监听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once  事件只能触发一次


例如：有 一个父div1中包含另一个 div2元素（如：input 元素）；并且两个元素都有 点击事件：@click （clickDiv 和 clickInput）
.stop 
  那么默认点击 div2（input） 元素 的点击效果可以向上冒泡：就是可以向上传递；也就是 父div1的click 也会被触发 :
  结果就是：同时触发了clickDiv 和 clickInput 
  但是触发的顺序是：先 div2 的点击然后才是 div1 的触发 （注意和 capture 的区别）

.prevent 
  例如有一个元素（ <a></a> ） 标签中含有 默认的点击触发事件；那么通过 .prevent 修饰后 这个点击后的默认的触发效果是不能生效的 。

.capture 
  也就是当点击 div2(input 元素) 元素的时候；其向上传递；捕获其父点击事件；在执行当前被点击的元素的事件；也就是执行的顺序是：先执行 最外层的：div1 然后才执行div2
  其执行的结果就是：  先是： clickDiv 的点击事件；然后才是：clickInput 的点击事件 

.self
  被修饰后；只有当点击 其对应的布局才触发事件；  例：如果 div1 被修饰后  ； 那么只有当点击 div1 才能触发其div1对应的点击事件 ；
  也即是说 当点击 div2(Input元素)   这个时候触发只有 div2 的点击事件； 不会触发 div1  的点击事件 ；
  只有点击 div1 的时候 才出发 div1 对应的触发事件 。

.once 
  只能被执行一次；如：一个点击事件；只会第一次点击生效；再次点击的话 点击事件就无效了 。

-->


        <!-- 点击：div2Input 后 ，默认的 执行结果是；
先执行： div2Input 再执行：div1 
-->
        <!-- <div id="div1" style="width: 100%" @click="div1">
            <input id="div2Input" type="button" :value="msg" @click="div2Input">
        </div> -->



        <!-- .stop : 对 div2Input 使用阻止其 冒泡  ;  那么执行的结果是；
            如果只是点击： div2Input 那么因为stop阻止冒泡所以 只能 执行： div2Input 事件
            当然如果我们点击 div1 那么其点击是不会影响的 
        -->
        <!-- <div id="div1" style="width: 100%" @click="div1">
            <input id="div2Input" type="button" :value="msg" @click.stop="div2Input">
        </div> -->


        <!--  .prevent :阻止默认事件  
        如： <a>标签中 href是 默认的点击后的链接事件 
            这个时候使用 .prevent 修饰后；其点击后的 链接事件 就不能生效 了 。 
    -->
        <!-- <div id="div1" style="width: 100%" v-on:click="div1">
                <a id="div2Input" href="http://www.baidu.com" v-on:click.prevent="div2Input">内事问百度，外事问谷歌（内事）</a>
            </div> -->



        <!-- .capture: 事件捕获模式： 先捕获其外层事件；然后在捕获 当前点击的事件 
⚠️ 注意这个修饰符一般修饰的是 一个父 元素；即：修饰的元素含有子元素；这样 点击子元素的时候 父元素才会通过这个修饰符 去先执行 其捕获的父元素的事件  
点击 div2Input 后其执行的结果是：先执行 父元素div1 再执行 div2Input 的点击事件
-->
        <!-- <div id="div1" style="width: 100%" v-on:click.capture="div1">
        <input id="div2Input" type="button" :value="msg" @click="div2Input">
    </div>  -->



        <!-- .self: 只有点击被修饰的元素的时候才执行 其对应的点击事件  
只有仅当点击 .self 修饰的元素的时候 点击事件才能生效 ；
如下面的执行：当点击 divInput 的时候  div1 是不能执行 的； 只有点击：div1 的时候  其点击事件才能执行 。
-->
        <!-- <div id="div1" style="width: 100%" v-on:click.self="div1">
            <input id="div2Input" type="button" :value="msg" @click="div2Input">
        </div>  -->


        <!-- .once 只能执行一次  -->
        <!-- <div id="div1" style="width: 100%" v-on:click.once="div1">
                <input id="div2Input" type="button" :value="msg" @click="div2Input">
            </div>  -->


        <!-- 上面的几个修饰符 都可以叠加使用如：
            如下面的：同时使用了： stop 和 self 
            那么结果就是：其阻止向上冒泡 并且只有点击 div2Input的时候才能触发其 点击事件
            -->
        <div id="div1" style="width: 100%" v-on:click="div1">
            <input id="div2Input" type="button" :value="msg" @click.stop.self="div2Input">
        </div>  

 

        <!-- 

          事件的双向绑定：  v-model
          也就是说：当V 改变时 M 也会改变 ；M 改变时 V 也改变 。(MVVM 模式)

          使用 v-model 指令：只能运用在 表单元素中：如：
           input (radio ,text ,address ,email ...)  select(选择器)   checkbox textarea 


            v-bind：只能实现数据的单向绑定 
          -->
        <div>
            <input type="text" v-model="msg_model"><br>
            <input type="button" v-bind:value="msg_model">

        </div>
    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                msg: '事件修饰符',
                msg_model: '注意看是否改变～～～'

            },
            methods: {
                div1() {//ES6 的写法
                    console.log('div1 事件 执行'); 
                },
                div2Input: function () {
                    console.log('div2 input 事件 执行～～～');
                } 
            } 
        }) 
    </script>


</body>

</html>

通过在浏览器中–> 检查查看事件效果：

在这里插入图片描述

学习总不晚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03事件修饰符

直接划重点.stop: 阻止冒泡.prevent: 阻止默认事件.capture: 添加事件监听器时使用事件捕获模式.self: 只当事件在该元素本身（比如不是子元素）触发时触发回调.once: 事件只能触发一次上牛百叶：添加案例说明<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫