【前端知识之JS】JS中的事件模型和事件代理

饭啊饭°

已于 2022-07-18 09:31:01 修改

阅读量523

点赞数 1

分类专栏：前端知识之JS 文章标签：前端 javascript 面试

于 2022-05-30 22:57:37 首次发布

本文链接：https://blog.csdn.net/weixin_44337386/article/details/125048508

版权

本文深入探讨了JavaScript中的事件模型，包括DOM0级、DOM2级和IE事件模型，重点阐述了事件流的概念及冒泡和捕获阶段。此外，详细介绍了事件委托的原理、应用场景和注意事项，强调了其在优化性能和处理动态元素中的优势。

摘要由CSDN通过智能技术生成

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍 JS中的事件模型和事件代理。

一、事件与事件流

事件：在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性，常见的有加载事件、鼠标事件、自定义事件。
事件流：由于DOM是个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序的问题，这就是事件流。
事件流都会经历的三个阶段

事件捕获阶段；
处于目标阶段；
事件冒泡阶段。

事件冒泡：一种从下往上的传播方式，由最具体的元素然后逐渐向上传播到最不具体的那个节点，也就是DOM的高层的父节点。

<body>
    <button id="btn">Click me!</button>
</body>

<script>
    var btn = document.getElementById('btn');

    btn.onclick = function(){
     
        console.log("1.Button");
    }
    document.body.onclick = function(){
     
        console.log("2.Body");
    }
    document.onclick = function(){
     
        console.log("3.document");
    }
    window.onclick = function(){
     
        console