vue的事件监听
<div id="app"> <button type="button" @click="btnClick(a,$event)">maomao</button> <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis">阻止单击事件继续传播</a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit">提交事件不再重载页面</form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat">修饰符可以串联</a> <!-- 只有修饰符 --> <form v-on:submit.prevent>只有修饰符</form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis">点击事件将只会触发一次</a> <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div> </div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> const vm = new Vue({ el:"#app", methods:{ btnClick(a,e){ //若调用时时 btnClick(a) //则获取event的方式是 console.log(a,event.target.innerHTML); // console.log(event.target.innerHTML); console.log(a,e.target.innerHTML); }, doThat(){ console.log("dothat!"); }, doThis(){ console.log("dothis!"); } } }) </script>
本文来自博客园,作者:没有烦恼的猫猫,转载请注明原文链接:https://www.cnblogs.com/maomao777/p/15820027.html