(前端)事件的捕获和冒泡/钩子函数

最新推荐文章于 2024-05-15 20:09:45 发布

weixin_45702075

最新推荐文章于 2024-05-15 20:09:45 发布

阅读量198

点赞数

本文链接：https://blog.csdn.net/weixin_45702075/article/details/108964575

版权

事件的捕获和冒泡

首先，DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
事件的捕获和冒泡存在于使用addEventListener(event, function, useCapture)方法之后。其中useCapture参数：true，事件捕获状态；false，事件冒泡状态。默认不填，即为false，事件冒泡。
当触发dom事件(event)之后会触发事件捕获和事件冒泡。
事件捕获：浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
事件冒泡：事件冒泡顺序是由内到外进行事件传播，直到根节点。
注意：dom标准事件流的触发的先后顺序为：先捕获再冒泡

经典例子：

<body>
    <ul id="parent">
        <li id='child1'>子节点</li>
    </ul>
    <script>
        document.getElementById('parent').addEventListener('click',function() {
            console.log('事件捕获'+this.id);
        },true);
        document.getElementById('child1').addEventListener('click',function() {
            console.log('事件捕获'+this.id);
        },true);
        document.getElementById('parent').addEventListener('click',function() {
            console.log('事件冒泡'+this.id);
        });
        document.getElementById('child1').addEventListener('click',function() {
            console.log('事件冒泡'+this.id);
        });
      /*结果：事件捕获parent
      		  事件捕获child1 
      		  事件冒泡child1
      		  事件冒泡parent
      */
    </script>
</body>

钩子函数（vue）##

先看看vue完整的生命周期：图文来源
在这里插入图片描述
钩子函数会在vue实例创建的时候自动调用，不需要手动触发，每个生命周期阶段有相应的钩子函数：
1.beforeCreate --创建前
触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
在此阶段可以做的事情：加loading事件