vue事件（键盘事件，鼠标事件，输入事件）事件冒泡和捕获

无论事件流中只有捕获还是事件流中只有冒泡，还是说是事件流中既有捕获还有冒泡，event.stopPropagation()都可以阻止事件流的传播顺序。只要是event.stopPropagation()加在哪里，则到哪里就停止运行，停止捕获或者停止冒泡，简单说是，仍然按照正常的混合机制流程走，只是哪里有e.stopPropagation()则这个流程到哪里就停止了。为true时，表示事件捕获阶段执

cn33333

7850人浏览 · 2022-10-20 11:07:49

cn33333 · 2022-10-20 11:07:49 发布

事件冒泡

微软提出了名为事件冒泡(event bubbling)的事件流。

事件冒泡可以形象的比喻成把一颗石头投入水中, 泡泡会一直从水底冒出水面。 // 也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是button→ div→ body→ html→ document.

事件捕获

网景提出另一种事件流名为事件捕获(event capturing)。// 与事件冒泡相反,事件会从最外层开始发生,直到具体的元素。

因此在事件捕获的概念下在button按钮发生click事件的顺序应该是document→ html→ body→ div→ button

后来W3C采用折中的方式, 平息了网景和微软之间的战争, 制定了统一的标准 - 先捕获再冒泡。

事件冒泡案例：

点击div2结果如下：

分析：

因为biv2在dv1里面，所以点击biv2时，也同时点击了biv1，这就是事件冒泡

事件捕获案例：

事件监听：addEventListener('事件', function(){ }, flase/true)；

用于监听某个事件，当监听到这个事件时去执行某个方法

addEventListener() ：

第一个参数是需要绑定的事件；

第二个参数是触发事件后要执行的函数；

第三个参数默认为false，为false时，表示事件冒泡阶段执行，从里往外；为true时，表示事件捕获阶段执行，从外往里。

点击box2结果如下：

是不是很疑惑，自己明明点击的是box2，打印的数据却是“点击box1 点击box2”？？？？其实这就是事件捕获。

终止事件冒泡

在相应的函数中加上event.stopPropagation()

这是阻止事件的冒泡方法，不让事件向documen上蔓延。

点击box2结果如下：

阻止事件冒泡

stopPropagation()方法既可以阻止事件冒泡，也可以阻止事件捕获，也可以阻止处于目标阶段。
无论事件流中只有捕获还是事件流中只有冒泡，还是说是事件流中既有捕获还有冒泡，event.stopPropagation()都可以阻止事件流的传播顺序。只要是event.stopPropagation()加在哪里，则到哪里就停止运行，停止捕获或者停止冒泡，简单说是，仍然按照正常的混合机制流程走，只是哪里有e.stopPropagation()则这个流程到哪里就停止了。

键盘事件

keyCode和charCode属性使用比较复杂，但是它们在实际开发中又比较常用，故比较这两个属性在不同事件类型和不同浏览器中的表现时非常必要的，如下表所示。读取可以根据需要有针对性的选用事件响应类型和引用属性值。

keyCode和charCode属性值

某些键的可用性不是很正确，如PageUp和Home键等。不过常用功能键和字符键都是比较稳定的，如下表所示。

键位和码值对照表

案例：

<body>
    <div id="baat">
        <h1>Hello,{{name}}</h1>
        <input type="text" placeholder="按下回车键" @keyup="shont">
        <input type="text" placeholder="按下回车键" @keyup.enter="shont">
        <input type="text" placeholder="按下回车键" @keyup.5="shont">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.keyCodes.enter = 5
        const x = new Vue({
            el: '#baat',
            data: {
                name: 'huao',

            },
            methods: {
                shont(e) {
                    // e.key键盘按键名  e.keyCode按键数字
                    console.log(e.key, e.keyCode)
                }
            }
        });
    </script>
</body>

鼠标事件

@click: 当单击元素时,

发生click事件。

@dbclick: 当双击元素时,

发生dbclick事件。 @focus: 当元素获得焦点时,

发生focus事件。 @blur: 当元素失去焦点时发生blur事件。 @submit: 当提交表单时,

发生submit事件。

@keydown: 当键盘被按下时,

发生keydown事件。 @keyup: 当键盘被松开,

发生keyups事件。

@mouse enter: 当鼠标指针穿过(进入) 被选元素时,

会发生mousedown事件。

@mouse down: 当鼠标指针移动到元素上方,

并按下鼠标左键,

发生mousedown事件。 @mouse leave: 当鼠标离开被选元素时,

会发生mouseleave事件。

@mouse move: 当鼠标指针在指定的元素中移动时，会发生 mousemove 事件。

@mouse out: 在鼠标指针离开被选元素或任意子元素时都会被触发。

@mouse over: 当鼠标指针位于元素上方时，会发生 mouseover 事件。

@mouse up: 当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。

实例：

一：

       <!-- 但点击这个按钮，就调用fn1函数 -->
        <button v-on:click="fn1">点我</button>
        <!-- 当双击这个按钮，就调用fn1函数 -->
        <button v-on:dblclick="fn1">双击</button>
        <!-- 当移入这个按钮，就调用fn2函数 -->
        <button v-on:mouseenter="fn2">移入</button>

        <!-- 简写形式：把v-on：改成@就是简写形式 -->
        <h4>以下是简写</h4>
        <hr>

        <!-- 但点击这个按钮，就调用fn1函数 -->
        <button @click="fn1">点我</button>
        <!-- 当双击这个按钮，就调用fn1函数 -->
        <button @dblclick="fn1">双击</button>
        <!-- 当移入这个按钮，就调用fn2函数 -->
        <button @mouseenter="fn2">移入</button>



 methods: {
                fn1() {
                    alert('点击')
                },
                fn2() {
                    alert('碰我干嘛')
                },
           }

二：

        <!-- 鼠标滚动事件 -->
        <div @mousewheel="fi" style="height: 500px;"></div>
       
        fi() {
                    console.log('鼠标滚动了')
                },

输入事件


        <!-- 焦点事件：在元素获取或失去焦点触发的事件 -->
       <!--   获取焦点事件 -->
        <input @focus="fu">
       <!--   失去焦点事件 -->
        <input @blur="fu1">


         <!-- 
        - change：变更     @change
        输入框里面内容发生改变且失去焦点时触发

        - input：实时变化     @input
        输入框里面内容发生改变（且不用失去焦点）时触发
     -->
        <!-- 输入事件 -->
        <input @change="fi1">
        <input @input="fi1">



         fu() {
                    console.log('获取焦点')
                },
         fu1() {
                    alert('失去焦点')
                },
        fi1() {
                    console.log('内容变更了')
                },