事件处理

v-on:click当事件被点击，就调用名字为showInfo的函数去调用，简写方式：@

知识点：事件对象

事件对象是浏览器在触发事件时自动创建的对象，包含了与事件相关的详细信息，例如事件类型，目标元素，触发时间等等，开发者可以根据事件对象获取这些信息并进行处理

event.target 拿到发生事件的那个事件目标，即发生事件的那个元素，在代码中，就是button

event.target.innerText 拿到发生事件里面的元素的文字

总结：

事件的基本使用：

    1，使用v-on:xxx或者@xxx绑定事件，xxx是事件名

    2，事件回调需要配置在method对象中，最终会在vm上

    3，methods中配置的函数，不要使用箭头函数，否则this就不是vm了

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

    5，@click="demo"和@click="demo($event)" 效果一致，但是后者可以传参

事件修饰符

回顾：event.preventDefault，代表的是阻止默认事件

除开这种方法用来组织一些元素的默认事件外，还能通过另一种方法：

<a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

使用@click的prevent进行修饰，这就是事件修饰符

以下为Vue当中的事件修饰符：

prevent:阻止默认事件

stop阻止事件冒泡

once事件只触发一次

下面的稍微不常见

capture 使用事件的捕获方式

self 只有event.target是当前操作元素时才触发事件

passive 事件的默认行为立即执行，无需等待事件回调执行完毕

知识点：事件冒泡和事件捕获

事件冒泡：当一个事件在某个元素上触发后，会沿着DOM树从该元素向上逐层传播到父元素，知道document或者window的过程

<div 事件一>
    <button 事件二>点击按钮</button>
</div>

当事件二触发时，会因为数据冒泡而影响到事件一，但很多时候我们可能并不需要事件冒泡

就如图中的

<div class="div1" @click="showInfo2">
    <button @click="showInfo">点我提示信息</button>
</div>

于是就要使用stop来阻止事件冒泡，或者在method中使用event.stopPropagation()

事件只触发一次：当我们按一下按钮，出现一次效果，但是再按一次，效果不再出现了

使用once

JS事件流：在JavaScript中，事件流是指从页面中接收事件的顺序。这个概念对于理解如何交互式地处理用户的动作至关重要。事件流可以分为三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段

事件流描述了从页面中接收事件的顺序，一个完整的JS事件流是从window对象开始，最后回到window对象的过程，而这个过程中，事件流可以分为三个阶段

事件捕获：事件捕获是事件传播的初始阶段，从最外层的祖先元素开始，逐层向内传播，直到目标元素。

事件捕获的主要目的是在事件到达目标元素之前，先处理外层元素的事件。

事件捕获与事件冒泡的区别

事件捕获与事件冒泡是事件传播的两个阶段。

事件捕获从最外层的祖先元素开始，逐层向内传播，直到目标元素；

而事件冒泡则是从目标元素开始，逐层向外传播，直到最外层的祖先元素。

在没有任何配置下，都是在冒泡阶段执行事件，捕获阶段从上往下进行搜索，不执行事件

但是在实际应用中，可以根据需要选择在捕获阶段或冒泡阶段处理事件，甚至可以同时在两个阶段处理事件。例如，可以在捕获阶段处理某些事件，在冒泡阶段处理其他事件，以实现更灵活的事件处理逻辑。

比如使用capture，在捕获阶段执行事件

这是未使用capture的时候：

这是使用capture的时候

以下案例使用self

event.target在前面说过了：event.target 拿到发生事件的那个事件目标，即发生事件的那个元素

<div class="demo" @click.self="showInfo"></div>
如果以后有人触发了div身上的click，并且e.target还是div的时候，才能帮我们调用showInfo事件

passive具体解释见代码：

<!-- 
prevent:阻止默认事件

stop阻止事件冒泡

once事件只触发一次

capture 使用事件的捕获方式

self 只有event.target是当前操作元素时才触发事件

passive 事件的默认行为立即执行，无需等待事件回调执行完毕 
-->

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>你好啊！</title>
    <!-- 引入vue.js文件 -->
    <script type="text/javascript" src="../JS/vue.js"></script>

    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .div2 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .div3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        li{
            height: 100px;
        }
        .div4{
            width: 200px;
            height: 200px;
            background-color: green;
            overflow: auto;
            /* 滚动条出现 */
        }
    </style>
</head>

<body>
    <div id="root">
        <h1>你好,{{name}}</h1>
        <a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

        <div class="div1" @click="showInfo2">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <button @click.once="showInfo3">点我提示一次信息</button>

        <div class="div2" @click="showInfo4(1)">
            <button class="div3" @click="showInfo4(2)">点我提示信息</button>
        </div>

        <!-- 滚动条事件 -->
        <!-- wheel，可以做出这样的效果，当滚动到x下时，播放一段动画 -->
        <!-- 只针对鼠标滚轮 -->
        <!-- <ul @wheel="demo" class="div4">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul> -->
        
        <!-- scroll -->
        <!-- 主要针对滚动条 -->
        <ul @scroll="demo" class="div4">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#root",
            data: {
                name: "柠"
            },
            methods:{
                showInfo(event){
                    console.log(111)
                },
                showInfo2(event){
                    console.log(123)
                },
                showInfo3(event){
                    alert("这里是once事件,只触发一次")
                },
                showInfo4(msg){
                    console.log(msg)
                },
                demo(event){
                    // console.log("滚动条滚动了")
                    for(let i=0;i<100000;i++){
                        console.log("#")
                    }
                    console.log("结束")
                    // 当滚动条滚动之后，先触发滚动的事件，然后执行回调，回调执行完毕后，执行默认行为，即滚动条滚动一下
                    // 但是使用了passive，默认行为即滚动立即执行，无需等待事件回调完毕
                }
            }
        })
    </script>
</body>

</html>