黑马学习记录--vue 事件修饰符详解

约定不等于承诺〃 2022-03-20 12:09 303阅读 0赞

转载：[https://blog.csdn.net/bk\_yzw/article/details/78795182][https_blog.csdn.net_bk_yzw_article_details_78795182]  
这篇也很清楚：[https://blog.csdn.net/wxy270/article/details/79397076][https_blog.csdn.net_wxy270_article_details_79397076]

### 事件修饰符： ###

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

vue官网上指出：  
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。  
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。  
event.preventdefault():阻止默认事件发生，例如：a标签默认会刷新，表单的提交。  
event.stopPropagation()：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。即不会再产生捕获和冒泡事件。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70]  
如图所示：嵌套div，每一个div都有click事件，点击目标事件，先走捕获->目标->冒泡 即捕获：从外到内依次执行click事件，冒泡：从内到外依次执行click事件

vue事件修饰符：  
(1).stop // 阻止事件继续传播 即阻止它的捕获和冒泡过程  
实例：如下点击内部点击，阻止了冒泡过程，即只执行tz这个方法，如果不加.stop，讲先执行方法，后执行gett方法。即通过了冒泡这个过程。

（2）.prevent //阻止默认事件发生 即event.preventdefault():  
实例： 阻止了a标签的默认刷新

（3）.capture // 添加事件监听器时使用事件捕获模式，即在捕获模式下触发  
实例：在点击最里层的点击6时，gett方法先执行，因为gett方法在捕获模式执行的，先与冒泡事件。下列执行顺序 geet->set->tz ,因为后俩个还是冒泡模式下触发的事件。

（4）.self //当前元素自身时触发处理函数时才会触发函数，原理：是根据event.target确定是否当前元素本身，来决定是否触发的事件/函数  
实例：如果点击内部点击2，冒泡不会执行gett方法，因为event.target指的是内部点击2的dom元素，不是外部点击1的，所以不会触发自己的点击事件

（5）.once //只触发一次  
实例：

全部代码

<!doctype html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <link href="css/mui.min.css" rel="stylesheet" />
        </head>
    
        <body>
            <div id="app">
            <button v-on:click="gett" >点击</button>
            <input type="text" v-on:keyup.13="gett" />
            <div v-on:click="gett">外部点击
                <div  v-on:click.stop="tz">内部点击</div>
            </div>
            <a href="" v-on:click.prevent>dsfs</a>
            <div v-on:click.self="gett">外部点击1
                <div  v-on:click="tz">内部点击2</div>
            </div>
            <div v-on:click.capture="gett">外部点击5
                <div  v-on:click="tz">内部点击5
                    <div  v-on:click="set">点击6</div>
                </div>
            </div>
            <div  v-on:click.once="tz">once</div>
            </div>
    
            <div id='a'>外部点击3
                <div  id='b'>内部点击4</div>
            </div>
    
            <script src="js/mui.min.js"></script>
            <script src="js/vue.js"></script>
            <script type="text/javascript">
                mui.init()
            </script>
            <script type="application/javascript">
                var app = new Vue({
                    el: '#app',
                    data: {
                        name:'张三'
                    },
                    methods:{
                        gett:function(e){
                            alert("111");
                            console.log(e.target);
                            this.name='李四';
    
                        },
                        tz:function(e){
                            console.log(e.target);
                            alert(222)
                        },
                        set:function(e){
                            console.log(e.target);
                            alert(333)
                        }
                    }
                })
                document.getElementById('a').addEventListener('click',function(e){
                    console.log(e.target);
                    alert('aaaa')
                },true)
                document.getElementById('b').addEventListener('click',function(e){
                    console.log(e.target);
                    alert('bbbb')
                },true)
            </script>
        </body>
    
    </html>

[https_blog.csdn.net_bk_yzw_article_details_78795182]: https://blog.csdn.net/bk_yzw/article/details/78795182
[https_blog.csdn.net_wxy270_article_details_79397076]: https://blog.csdn.net/wxy270/article/details/79397076
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70]: /images/20220320/46d351afef7b4b01bdf0ecb5c6c834e8.png