首页 > 其他分享 >08-事件处理

08-事件处理

时间:2023-09-10 22:56:12浏览次数:33  
标签:事件处理 name 08 节点 事件 提示信息 event target

事件的基本使用

1) 使用v-on:xxx 或 @xxx 绑定事件,其中 xxx 是事件名

2) 事件的回调需要配置在 methods对象中,最终会在 vm实例对象上

3) methods中配置的函数,不要用箭头函数,否则 this 指向的就不是 vm实例对象了

4) methods中配置的函数,都是被Vue所管理的函数,this的指向是 vm实例对象 或 组件实例对象

5) @click="demo" @click="demo($event)"效果一样,但后者可以传参

 

常见的事件有

onclick: 鼠标单击事件;ondblclick: 鼠标双击事件;onmousedown: 鼠标按下去的事件;onmouseup: 鼠标弹起事件;

onmouseover,onmouseenter,onmouseout,onmouseleave, onm ousemove 监控鼠标的移入移出,以及移动事件

onkeydown: 按下任意按键的时候触发的事件;onkeyup: 抬起按键的时候触发的事件;onkeypress: 按下并放开任何字母数字键时触发的事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件的基本使用</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--  准备好一个容器  -->
        <div id="root">
            <h2>欢迎来到{{name}}</h2>
            <!--  点击按钮事件时,会调用showInfo函数  -->
            <button v-on:click="showInfo1">点我提示信息1(不传参)</button>
            <button @click="showInfo2($event,256)">点我提示信息2(传参)</button>
        </div>

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

            const vm = new Vue({
                el:"#root",
                data(){
                    return{
                        name:"马铃薯"
                    }
                },
                methods:{
                    showInfo1(event){
                        // event.target 拿到发生事件的事件目标,这里也就是button目标
                        // event.target.innerText,这里是拿到button目标的文本内容
                        console.log(event.target.innerText)
                        // 这里的 this 代表Vue实例对象
                        console.log(this)
                        alert(this.name + "同学您好,这是您的提示信息1!")
                    },
                    showInfo2(event,number){
                        console.log(event.target.innerText,number)
                        console.log(this)
                        alert(this.name + "同学您好,这是您的提示信息2!")
                    }
                }
            })

        </script>
    </body>
</html>

 

拓展:事件流(事件捕获和事件冒泡)

在JavaScript中,我们将事件发生的顺序成为“事件流”,当我们触发某个事件时,会发生一系列的连锁反应。

DOM事件流(event flow)存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。

1) 事件捕获

事件捕获是由外到内的。在事件捕获阶段,事件会从 DOM 树的最外层开始,依次经过目标节点的各个父节点,并触发父节点上的事件,直至到达事件的目标节点。

2) 事件冒泡

事件冒泡和事件捕获是完全相反的。事件冒泡是由内到外的,它是从目标节点开始,沿父节点依次向上,并触发父节点上的事件,直至文档根节点,就像水底的气泡一样,会一直向上。

 

事件修饰符

1) prevent:阻止默认事件

2) stop:阻止事件冒泡

3) once:事件只触发一次修饰符

4) capture:使用事件的捕获模式

5) self:只有event.target是当前操作的元素时,才触发事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            *{
                margin-top: 20px
            }
            .demo{
                height: 65px;
                background-color: skyblue;
            }
            .box1{
                background-color: skyblue;
                padding:5px;
            }
            .box2{
                background-color: orange;
                padding:5px;
            }
        </style>
    </head>
    <body>
        <!--准备好一个容器-->
        <div id="root">
            <h2>欢迎来到{{name}}的学习网站</h2>

            <!--1.阻止默认事件修饰符:prevent-->
            <!--<a v-bind:href="url" v-on:click="showInfo">点我提示信息</a>-->
            <a v-bind:href="url" v-on:click.prevent="showInfo">点我提示信息</a>

            <!--2.阻止事件冒泡修饰符:stop-->
            <!--事件冒泡:给父级绑定了事件,子级没有绑定事件,但是当鼠标移入子级的时候会触发父级的事件-->
            <div class="demo" @click="showInfo">
                <button @click.stop="showInfo">点我提示信息</button>
            </div>

            <!--3.事件只触发一次修饰符:once-->
            <button @click.once="showInfo">点我提示信息</button>

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

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

        </div>

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

            new Vue({
                el:"#root",
                data(){
                    return{
                        name:"马铃薯",
                        url:"https://www.cnblogs.com/REN-Murphy/category/2342442.html"
                    }
                },
                methods:{
                    showInfo(event){
                        // event.preventDefault()不执行与该事件关联的默认动作
                        // 这里也就是不执行 <a> 的href="url"跳转链接动作
                        // event.preventDefault()
                        alert(this.name + "同学您好!")
                        console.log(event.target)
                    },
                    showMsg(msg){
                        console.log(msg)
                    }
                }
            })
        </script>
    </body>
</html>

 

 

标签:事件处理,name,08,节点,事件,提示信息,event,target
From: https://www.cnblogs.com/REN-Murphy/p/17692012.html

相关文章

  • Python基础学习day08
    常见的数据类型:int,整数类型(整形)bool,布尔类型str,字符串类型list,列表类型tuple,元组类型dict,字典类型set,集合类型float,浮点类型(浮点型)每种数据类型都有自己的特点及应用场景,以后的开发中需要根据实际的开发情况选择合适的数据类型。每种数据类型的讲解,会按照以下4个维度来进行:定义独有......
  • 基于AD9208 3/2.6/2GS/s,14bit FMC AD子卡
    概要QT7131是一款高分辨率、高采样率ADCFMC子板。它提供2路14位3G/2.6G/2GS/sA/D通道,全功率模拟输入带宽(-3dB)可达9GHz。QT7131A为3.0GSPS采样率,QT7131B为2.6GSPS采样率,QT7131C为2.0GSPS采样率。板卡支持外部触发输入;内参考、外参考、外时钟三种时钟方式,可通过SPI总线实现时钟源......
  • python进阶 day08字典数据类型内置方法
    字典数据类型内置方法1.作用对于值添加描述信息使用他2.定义方式用{}以逗号隔开加入键值对:key:valueinfo_dict={'name':'wangdapao','age':18,'height':120,'gender':'female','hobby_list':['dapao','basketball'......
  • Java(day08):变量、常量及其作用域
    前言Java是一种面向对象编程语言,它通过变量和常量来处理数据类型。本文将介绍Java中的变量、常量及其作用域以及如何使用它们。摘要本文将介绍Java中的变量、常量及其作用域。我们将讨论变量和常量的含义、如何定义和使用它们,以及作用域的概念和限制。我们还将提供代码示例......
  • [代码随想录]Day40-动态规划part08
    题目:139.单词拆分思路:单词就是物品,字符串s就是背包,单词能否组成字符串s,就是问物品能不能把背包装满。拆分时可以重复使用字典中的单词,说明就是一个完全背包!动规五部曲分析如下:确定dp数组以及下标的含义:dp[i]:字符串长度为i的话,dp[i]为true,表示可以拆分为一个或多个在字......
  • test0908
    T2大样例都过了还挂了,挂的还是前两个\(\text{subtask}\),又挂大分,总是有些东西不熟悉T1预计:100pts实际:100pts\((a\&b)\)告诉我们\(a\)和\(b\)哪些位都是\(1\),\((a\oplusb)\)告诉我们\(a\)和\(b\)一些位其中有一个是\(1\),而\((a|b)\)只要其中有一位是\(1\)就......
  • 2023-09-08 小程序之启用组件按需注入 ==》 添加一行代码:"lazyCodeLoading": "require
    在manifest.json文件里面的mp-weix对象添加代码:"lazyCodeLoading":"requiredComponents"可实现组件按需注入,引用官方说法就是:启用按需注入后,小程序仅注入当前访问页面所需的自定义组件和页面代码。未访问的页面、当前页面未声明的自定义组件不会被加载和初始化,对应代码文件将不被......
  • 【230908-15】求证南宋数学家秦九韶发现的求三角形面积的“三斜公式”并求值
    ......
  • 【230908-16】▲ABC中,a=2,c=二倍根号2,C=45°,则S△ABC=?
    ......
  • 【230908-17】▲ABC中,b=2,B=30°,C=45°,则S△ABC=?(2013年全国II卷)
    ......