nodejs的事件和事件流

121 阅读 0 评论 80 点赞

我是靠谱客的博主有魅力滑板，最近开发中收集的这篇文章主要介绍nodejs的事件和事件流，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

什么是事件

JavaScript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性。

常见的有加载事件、鼠标事件。

什么是事件流

由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序问题，这就涉及到了事件流。

页面触发个事件时,会按照一定的顺序来响应事件，事件的响应过程为事件流。

js的事件三阶段

事件捕捉阶段(capture phrase): 事件开始由项层对象触发，然后逐级向下传播，直到目标元素;

处于目标阶段(target phrase): 处于绑定事件的元素上;

事件冒泡阶段(bubbling phrase): 事件由具体的元素先接收，然后逐级向上传播,直到不具体的元素;

事件捕获是从上到下,而事件冒泡,是从下到上。

事件修饰符

.stop 阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" @click="divclick">
        <ul @click="ulclick">
            <!-- 事件修饰符 -->
            <!-- .stop 阻止事件冒泡 -->
            <li @click.stop="liclick">1111</li>
            <li>222</li>
            <li>3333</li>
        </ul>
    </div>
    <script src="/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            methods: {
                // 事件冒泡↑
                divclick(){
                    console.log('div');
                },
                ulclick(){
                    console.log('ul');
                },
                liclick(evt){
                    console.log('li');
                    // evt.stopPropagation(); js原生写法阻止事件冒泡
                    
                }
            },
        })
    </script>
</body>
</html>

计算正方形的面积

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>正方形的边长是{{length}}</p>
        <p>正方形的面积是{{area}}</p>
        <button @click="one">点击改变</button>

    </div>
    <script src="/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                length:2,
            },
            // 计算属性
            computed:{
                area(){
                    return this.length*this.length
                }
            },
            // 方法属性
            methods: {
                one(){
                    this.length++
                }
            },
        })

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

事件对象

new vue (
el:' .app',
data: {
isshow:'',
placeholder:"想说什么写下来"
methods:{
//单击事件
click(){
alert('单击一下')
//双击事件
dblclick(){
alert("双击六六哟')
},
//聚焦事件，改变input提示文字
focus(){ 
this . placeholder= "慢慢来'
},
//失焦事件，让改变的提示文字复原
blur(){
this . placeholder= "留下话"
// this. placeholder= '哼'
},
//键盘按下事件，按回车弹窗，控制台会输出1
keydown(){
alert(' ThanksJI( w )/亲的话我已经收到了')
console . log(1);
},
//键盘松开事件，松开回车，控制台会输出6(要把上面弹窗关掉)
keyup(){ 
console.1og(6);

事件方法
@click: 单击事件
@dblclick: 双击事件
@focus: 当元素获取焦点时触发事件
-----焦点元素，可以用tab键选中，拥有tabindex属性，如a，input, btn这些表单元素都算焦点元素
而获取焦点，就是激活表单字段，使其可以触发键盘事件
@blur:当元素失去焦点时触发事件
@submit:当提交表单时触发事件
@keydown: 当键盘被按下时触发事件
@keyup:当键盘被松开时触发事件
以下是与鼠标相关事件
@mouse enter: 当鼠标指针进入(或者穿过)指定元索时会触发事件
@mousedown:当鼠标指针进入指定元素，按下左键点击时会触发事件
@mouseup:当鼠标指针进入指定元素，并且松开左键时会触发事件
@mouseleave:当鼠标指针离开指定元素时会触发事件
@mousemove:当鼠标指针在指定元素中移动时会触发事件
@mouseout:当鼠标指针在离开指定元素包括其子元素时会触发事件
@mouse over:
当鼠标指针悬停指定元素中移动时会触发事件