vue学习笔记7----事件处理

最新推荐文章于 2023-11-26 19:20:01 发布

lazy91

最新推荐文章于 2023-11-26 19:20:01 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_59954212/article/details/126422908

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、事件的基本使用

        1.使用v-on:xxx 或 @xxx（简写）绑定事件，其中xxx是事件名；
        2.事件的回调需要配置在methods对象中，最终会在vm上；
        3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

<body>
    <div id="root">
        <h1>Welcome to {{name}}</h1>
        <button v-on:click="showInfo">点我提示信息</button>
        <button v-on:click="showInfo1">箭头函数测试</button>
        <!--简写形式-->
        <button @click="showInfo2">简写</button>
        <!-- 传参 -->
        <button @click="showInfo3($event,88)">传参</button>
    </div>

    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                name:'Vue'
            },
            methods:{
                showInfo(event){
                    //alert('同学你好')
                    //console.log(event.target)   //button按钮
                    //console.log(event.target.innerText) //点我提示信息
                    
                    //console.log(this)
                    //console.log(this===vm)   //这里的this是vm，即vue实例对象

                },

                //如果写成箭头函数，这里的this是window
                showInfo1:(event)=>{
                    console.log(this)
                },

                showInfo2(){
                    console.log('简写测试')
                },

                showInfo3(event,number){
                    console.log(event,number)
                },
            }
        })
    </script>
</body>

2、事件修饰符

vue有6个事件修饰符。

1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

什么是冒泡

冒泡作为一种特有事件普遍存在于开发中，那么，什么是冒泡呢？

冒泡是指：当一个元素上的事件被触发后，比如一个按钮被触发了onclick事件，同样的事件将在那个元素的所有祖先元素中被触发。这一过程就称为事件冒泡。并且这个事件会从原始元素开始一直冒泡到DOM树的最上层。

冒泡事件遵循的顺序：div -> body -> html -> document -> window。

需要注意：不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload

如何阻止冒泡？

W3C推荐的写法：event.stopPropagation()；

冒泡与捕获

事件传递有两种方式：冒泡与捕获。事件传递定义了元素事件触发的顺序。默认情况下是冒泡模式，vue中可以使用capture事件修饰符使用事件的捕获模式。

如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

eg: <div @click="showMsg1">

outer

<p @click="showMsg2">inner</p>

</div>

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。冒泡：由内及外，showMsg1→showMsg2。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。捕获:由外到内，showMsg1→showMsg2。

捕获阶段在冒泡阶段之前。

@click.prevent.stop ：修饰符连续写。先阻止默认事件，再阻止冒泡。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: skyblue;
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>

	<body>
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>

			<!-- 阻止默认事件（常用） -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>

			<!-- 事件只触发一次（常用） -->
			<button @click.once="showInfo">点我提示信息</button>

			<!-- 使用事件的捕获模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是当前操作的元素时才触发事件； -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')

					//阻止默认行为(跳转到百度),vue提供.prevent
                    //event.preventDefault()

                    //阻止事件冒泡,vue提供.stop
                    //event.stopPropagation()
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>
</html>

3、键盘事件

onkeydown：当某个键盘按键被按下时所触发的事件。

onkeyup：当某个被按下的键盘按键被松开时所触发的事件。

1.Vue中常用的按键别名：
                           回车 => enter
                           删除 => delete (包括“删除”和“退格”键)
                           退出 => esc
                           空格 => space
                           换行 => tab (特殊，必须配合keydown去使用，tab会使当前对象失去焦点)
                           上 => up
                           下 => down
                           左 => left
                           右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值（event.key）去绑定。

    注意要转为kebab-case（短横线命名），例如CapsLock→caps-lock。

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta（win）
        配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
        配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名

6.同时按下两个键触发 eg:ctrl+a @keyup.ctrl.a = "..."

<body>
    <div id="root" >
        <h2>welcome to {{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
        <!-- 逐渐淘汰了，不推荐，最好使用名称 -->
        <input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo">
        <!-- 同时按下两个键触发 eg:ctrl+a -->
        <input type="text" placeholder="ctrl+a" @keyup.ctrl.a="showInfo">
    </div>
</body>

<script>
    Vue.config.keyCodes.huiche = 13 //自定义别名，也不太推荐

    new Vue({
        el:'#root',
        data:{
            name:'vue'
        },
        methods: {
            showInfo(event){
                // 输出输入框中的值
                console.log(event.target.value);

                //键盘上字符的编码
                //console.log(event.keyCode)
                //键的名称和编码
                //console.log(event.key,event.keyCode)

                //原始实现按下enter控制台输出输入框的值
                //vue提供别名.enter
                // if(event.keyCode !== 13) return
                // console.log(event.target.value)
            }
        },
    })
</script>