前端祖传三件套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天前
|
前端开发 JavaScript
js - 前端跨域
端口号范围 0 ~ 65535
|
8天前
|
存储 SQL 前端开发
全栈工程师必须要掌握的前端JavaScript技能
作为一名全栈工程师,在日常的工作中,可能更侧重于后端开发,如:C#,Java,SQL ,Python等,对前端的知识则不太精通。在一些比较完善的公司或者项目中,一般会搭配前端工程师,UI工程师等,来弥补后端开发的一些前端经验技能上的不足。但并非所有的项目都会有专职前端工程师,在一些小型项目或者初创公司中,职能划分并不明确,往往要一个人前后端全都会做, 所以作为一名全栈工程师或者后端工程师,掌握必备的前端知识,也是必不可少的一项技能。今天就着重讲解一下,作为一名全栈工程师,前端JavaScript方面的必须要掌握的相关知识。
25 0
|
8天前
|
缓存 自然语言处理 前端开发
前端(十三)——JavaScript 闭包的奥秘与高级用法探索
前端(十三)——JavaScript 闭包的奥秘与高级用法探索
|
18天前
|
JavaScript 前端开发 编译器
前端经典面试题 | 吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解
前端经典面试题 | 吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解
|
2月前
|
JSON 前端开发 JavaScript
探究JavaScript前端热点面试题(三):让你在面试中游刃有余!
探究JavaScript前端热点面试题(三):让你在面试中游刃有余!
|
2月前
|
存储 前端开发 JavaScript
必知必会的JavaScript前端面试题篇(二),不看后悔!
必知必会的JavaScript前端面试题篇(二),不看后悔!
|
2月前
|
缓存 前端开发 网络协议
必知必会的JavaScript前端面试题篇(一),不看后悔!
必知必会的JavaScript前端面试题篇(一),不看后悔!
|
2月前
|
JavaScript 前端开发
前端——JS实现多条件过滤数组
前端——JS实现多条件过滤数组
|
2月前
|
前端开发 JavaScript Java
前端——JSP中引入项目中的js文件或css文件或图片
前端——JSP中引入项目中的js文件或css文件或图片
|
2月前
|
前端开发 JavaScript
前端——使用JavaScript(jQuery)通过身份证号获取籍贯、生日、年龄、性别
前端——使用JavaScript(jQuery)通过身份证号获取籍贯、生日、年龄、性别
热门文章
最新文章
相关产品
云迁移中心
推荐文章
更多