前端祖传三件套JavaScript的DOM之事件的冒泡/捕获

简介: 在前端开发中,事件处理是非常重要的一部分。JavaScript 中的 DOM 事件机制提供了丰富的功能和灵活的方式来处理各种事件,并且事件的传播方式也是其中不可或缺的一部分。本文将介绍 JavaScript 中的事件传播方式:冒泡和捕获。


一、事件冒泡

在事件冒泡模式中,事件首先在目标元素上触发,然后逐级向上传播到包含该元素的父级元素,直到到达最外层的祖先元素。在事件冒泡过程中,每个包容元素的处理函数都会执行,如果有多个相同类型的事件处理函数,它们会按照绑定的先后顺序依次执行。

以下是一个简单的示例:

<div id="outer">
    <div id="inner">Click me!</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('click', function(event) {
    console.log('Clicked on outer element');
});
inner.addEventListener('click', function(event) {
    console.log('Clicked on inner element');
});
</script>

在上述代码中,当点击 inner 元素时,事件会首先在 inner 元素上触发,然后冒泡到 outer 元素,最终到达文档的根元素。

二、事件捕获

在事件捕获模式中,事件从最外层的祖先元素开始逐级向下传播,直到到达目标元素。在事件捕获过程中,每个包容元素的处理函数都会执行,如果有多个相同类型的事件处理函数,它们会按照绑定的先后顺序依次执行。

以下是一个简单的示例:

<div id="outer">
    <div id="inner">Click me!</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('click', function(event) {
    console.log('Clicked on outer element (capture)');
}, true);
inner.addEventListener('click', function(event) {
    console.log('Clicked on inner element (capture)');
}, true);
</script>

在上述代码中,当点击 inner 元素时,事件从 outer 元素开始向下传播,在捕获阶段依次触发 outer 和 inner 元素的事件处理函数,最终到达目标元素 inner。

三、事件传播的应用

在实际开发中,我们可以利用事件冒泡和捕获的特性来实现一些常见的任务。

例如,在使用表格布局时,我们可能需要根据用户的操作来调整表格列宽。可以通过在表格父元素上绑定 mousemove 事件来实现:

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1-1</td>
            <td>Content 1-2</td>
            <td>Content 1-3</td>
        </tr>
        <tr>
            <td>Content 2-1</td>
            <td>Content 2-2</td>
            <td>Content 2-3</td>
        </tr>
    </tbody>
</table>
<script>
var table = document.querySelector('table');
var resizing = false;
var column = null;
var startX = null;
table.addEventListener('mousedown', function(event) {
    if (event.target.tagName === 'TH') {
        resizing = true;
        column = event.target;
        startX = event.pageX;
    }
}, true);
table.addEventListener('mousemove', function(event) {
    if (resizing) {
        var deltaX = event.pageX - startX;
        var width = parseInt(column.style.width || column.clientWidth);
        column.style.width = (width + deltaX) + 'px';
        startX = event.pageX;
    }
}, true);
table.addEventListener('mouseup
目录
相关文章
|
7天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
7天前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
|
7天前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
8天前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
20 0
|
10天前
|
前端开发 JavaScript API
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
11 0
|
15天前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
|
15天前
|
前端开发 安全 NoSQL
技术笔记:Security前端页面配置
技术笔记:Security前端页面配置
|
1月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
34 2
|
2月前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
55 1
|
2月前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战