JS 冒泡 （mark）

最新推荐文章于 2023-09-07 11:50:30 发布
原创 最新推荐文章于 2023-09-07 11:50:30 发布 · 727 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flash #function #html #c

在书写页面的JS 时候， 可能我们在促发一个事件的时候会有多个方法对其有响应。

 

 JS 这种单事件多响应   是依靠事件传播完成的

 

 JS 的事件传播是单向的 ， 即 冒泡  向父容器传播 ， 这点和FLASH 不一样（flash 默认是双向的）

 

 如果我们需要屏蔽父容器对于的时间处理方法   只需要停止事件的传播即可

 

 

 方法如下：

 

html 调用

 

 

JS学习笔记Mark
Mark Sheng的博客
07-08 511
x,y 为 undefined， z 为 1 多个变量不能赋一个值，最后一个才有值，其余都是UNdefind 未使用值来声明的变量，其值实际上是 undefined。 var carname; 重新声明 JavaScript 变量，该变量的值不会丢失： 2015 年以前，我们使用 var 关键字来声明 JavaScript 变量。ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局
react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
行星飞行的博客
07-06 746
在前面两篇文章中，我们花了较大的篇幅介绍的方法，在介绍同步异步时提到，在合成事件中对于更新都是异步，但在原生事件中更新却是同步，这说明在合成事件处理上必定与原生事件存在部分差异，那么本篇文章就来着重介绍中的合成事件，在文章开始之前我们先罗列部分问题：在文章开始前，大家可以先自行思考这些问题，假设这些在面试中遇到，你能回答多少呢？那么本文开始。虽然本文的核心重点是介绍的合成事件，但文章开头既然给了合成事件与原生事件相关对比问题，因此了解原生事件是有必要的，考虑到可能有同学对此类知识存在遗忘，这里做个简单复习。
mark.js：mark.js用于标记的文字，自定义插入标签
02-03
mark.js 简介 mark.js可用于标记替代的文字，目前提供的标记类型有文字涂改，文字缺漏，文字删除和文字互换。 结合工具可以标记文章中的图片和视频。 预览 校对（PC端/移动端）： 自定义插入标签（PC端）： 示例 const m = new Mark(document.querySelector('xxx'), { tagName: 'mark' }) // 自动标记 m.automark(dataList) // 文字涂改、文字缺漏 const data = m.mark('modify') // 文字删除 const data = m.mark('delete') // 文字
JavaScript——一些用法的Mark
Clare_0_0专栏
07-06 647
1. 点击展开或收起某些行 function TestBlack(TagName){ var obj = document.getElementById(TagName); if(obj.style.display==""){ obj.style.display = "none"; }else{ obj.style.display = ""; } }
JavaScript变量对象其三：执行上下文的两个阶段
06-17 177
现在我们终于到了本文的核心点了。执行上下文的代码被分成两个基本的阶段来处理： 进入执行上下文执行代码 变量对象的修改变化与这两个阶段紧密相关。 注：这2个阶段的处理是一般行为，和上下文的类型无关（也就是说，在全局上下文和函数上下文中的表现是一样的）。 进入执行上下文 当进入执行上下文(代码执行之前)时，VO里已经包含了下列属性(前面已经说了)： 函数的所有形参(如果我们是在函数
一些js/css动画 mark
笔记
06-15 392
一些网页需要的动画效果 1、animate.css  是文字跳动等效果 css纯动画 https://daneden.github.io/animate.css/ https://github.com/daneden/animate.css http://www.jq22.com/yanshi819 2、aos.js  aos.js轻量级页面元素滚动动画插件 http://www.j...
简单理解js的冒泡排序
10-20
在JavaScript中实现冒泡排序涉及到一系列的数组元素比较以及交换操作，主要目的是将无序的数组变为有序。 首先，冒泡排序的基本思想是通过重复遍历数组，比较相邻元素的大小，并在必要时交换它们的位置。每一轮排序...
前端js实现的冒泡排序的算法
12-12
在前端JavaScript环境中实现冒泡排序算法，可以通过编写一个函数来完成。该函数接收一个数组作为输入，然后通过循环和条件判断来实现排序。在排序过程中，我们可以利用JavaScript的特点来实现数组的交换，以及实时...
简单实现js鼠标跟随效果
10-19
- 为`#mark`元素添加`mouseover`和`mouseout`事件处理函数，以防止鼠标进入`#mark`时事件冒泡，从而造成连续创建和删除`#mark`元素的现象。 - 在`#box`的`mouseout`事件中，如果存在`#mark`元素则将其移除。 2. *...
数据结构——排序算法（冒泡排序、选择排序、插入排序、归并排序、快速排序、搜索算法）
qq_52301431的博客
08-25 1297
如果有一天你面试的时候, 让你写一个排序算法, 你可以洋洋洒洒的写出多个排序算法, 但是如果其中没有快速排序, 那么证明你对排序算法也只是浅尝辄止, 并没有深入的研究过.- 对于N个数据项呢?- 如果2位置元素小于1位置的元素, 那么将0位置的元素移动到1位置, 并且将2位置的元素放在0位置, 0 - 1 - 2搞定.选择排序第一次将第0位置的人取出, 和后面的人(1, 2, 3...)依次比较, 如果后面的人更小, 那么就交换..........
mark.js的简单应用
午我锁的博客
08-26 1741
有时候我们搜索需要高亮显示这时mark.js的强大就体现出来了 通过运行npm下载 npm install mark.js --save-dev 使用 var context = document.querySelector(".context"); var instance = new Mark(context); instance.unmark(); //删除mark.js创建的高光的方法 instance.mark(keyword [, options]); //突出显示自定义搜索词的方法 更
js冒泡算法
qq_66719324的博客
05-13 174
百度地图js添加mark_使用Mark.js将搜索关键字突出显示添加到任何网页
cune1359的博客
07-02 656
大多数浏览器都具有CTRL + F功能，可以搜索并查找用户正在寻找的内容。 但是，此功能在移动设备上不受支持，并且在使用动态文本时效果不佳。 幸运的是，有一个免费JavaScript插件Mark.js ，可以轻松地在任何页面上添加突出显示搜索功能 。 默认情况下，它可以用作普通JS插件，但也可以在jQuery之上运行。 这是一个完全开源的项目，因此您可以在任何商业网站或其他网站上自由使...
js-mark新时代的网页标记容器
zzz1048506792的博客
12-03 1129
js-mark 网站标注 网站标记 标注 js-mark是一个JavaScript库，用于在浏览器。他是一个可以在任何网页做标记的前端库, 它提供了一组可交互操作的工具来注释网页内容。 支持标记文本和 持久化存储与还原 如果进行简单的演示，可以打开运行方可查看演示效果使用静态文件,把静态文件直接放到项目中 创建一个新的jsMark实例,opts 会合并至默认配置 (如下所示). 配置说明：配置说明：当或会触发此
HTML CSS JS 小总结
m0_66451927的博客
02-27 1647
HTML html 超文本标记语言：用超链接的方法，将各种不同空间的文字信息组合在一起的网状文本。HTML是超文本最常用的格式。 超链接：网页的一部分，通过超链接将不同网页链接在一起构成网站，链接对象有文本、图片等，当对链接对象进行点击或其他触动操作时，浏览器会根据链接目标的类型来运行或打开链接目标。 html基本代码详解： 标签：html代码用标签标记文本，标签有单有双， 元素：标签+标签里的内容=元素，元素以开始标签开始，以结束标签结束，元素内容是开始标签和结束标签之间的内容，元素大多数拥有属
前端mark.js+highlight.js+小程序关键字关键词高亮
細水、長流√的专栏
09-07 897
highlight.js 点击get version按钮进入语言选择，勾选你常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。所以还需要设置博客园的代码块背景颜色。highlight.js是一款基于JavaScript的语法高亮库，目前支持125种编程语言，有63种可供选择的样式，而且能够做到语言自动识别，和目前主流的JS框架都能兼容，比较实用，而且用起来炒鸡简单！打开styles文件夹，里面有很多的css文件，这些文件可以更改代码的css样式，包括高亮的颜色和背景色(主题色)。
JS对象与包装类
weixin_30767835的博客
09-10 160
JS对象 对象可理解为我们生活中的对象，你有对象吗，没有可以创建一个，她有名字，年龄，外观的特点，即属性；也有一些特长，即方法。 实际对象是一组没有特定顺序的值，每个属性和方法都有一个名字，每个名字都和一个值一一对应。 根据面向对象设计，我们可以创建任意多个具有相同属性和方法的对象。 学对象的重要意义是封装一些数据以作他用。 对象的特点 封装 继承 ...
关于mark.js——————给页面选中文字添加下划线
impossible1994727的博客
05-29 2068
引用文档：https://markjs.io/ 本文用到的文件： 我全部通过基本例子来完成的： 1、根据内容匹配： context种如果有相同的内容可能也会被匹配； <div class="context"> 散文是一个汉语词汇，拼音是sǎn wén。一指文采焕发;二指犹行 散文是一种抒发作者真情实感、写作方式灵活的记叙类文学体裁。"散文"一词大概出现在北宋太平兴国(976年12月-984年11月)时期。《辞海》认为:中国六朝以来...
JavaScriptCore基本概念和基本使用(Swift)
欢迎来到Jack的程序世界
06-12 6141
JavaScriptCore简介      iOS 7中加入了JavaScriptCore框架，该框架让Objective-C和JavaScript代码直接交互变得更加简单方便。JavaScriptCore是Cocoa API，用于建立JavaScript与 Swift or Objective- C的桥梁。该框架允许我们在基于Swift or Objective- C的
javascript异步
最新发布
03-11
<think>好的，我现在需要回答用户关于“JavaScript异步”的问题。用户之前已经询问过AJAX和XHR，现在转向异步机制，这可能是他们学习JavaScript的进阶内容。首先，我要确保自己理解JavaScript异步编程的核心概念，包括事件循环、回调函数、Promise、async/await等。 用户可能已经了解同步和异步的区别，但可能需要更深入的解释。我需要从基础开始，逐步引导他们理解异步的重要性以及JavaScript如何处理异步操作。要注意使用用户之前接受的格式，比如分点解释、代码示例以及可能的技术对比。 我需要考虑用户可能的疑问点，比如为什么需要异步？回调地狱是什么？Promise如何解决这个问题？async/await又是怎样的语法糖？此外，用户可能对事件循环机制不太清楚，需要简明扼要地解释，避免过于复杂。 同时，用户之前的问题涉及到XHR和Fetch API，这些都是异步操作的具体应用，所以可以结合之前的例子来说明异步的使用场景。例如，在AJAX请求中使用回调或Promise处理响应。 还需要注意用户的技术水平，可能不太熟悉底层概念，所以需要用简单的比喻或类比来解释事件循环，比如厨房中的厨师处理多个订单的例子。此外，代码示例要清晰，注释详细，帮助用户理解每一步的作用。 在结构上，应该按照用户之前接受的层次结构，分核心概念、技术实现、对比、代码示例、特殊场景等部分。但要根据异步的主题调整内容，确保逻辑连贯，覆盖所有关键点。 另外，用户可能对异步错误处理感兴趣，比如try/catch在async/await中的使用，或者Promise的catch方法。需要包括这些内容，并提供示例说明如何处理异步中的异常。 还要考虑现代JavaScript的发展，比如Promise和async/await已经成为主流，但也要提到传统的回调方式，以便用户理解现有代码库中的模式。同时，可以简要提及生成器（Generators）和异步迭代，但可能作为进阶内容，不过分深入。 最后，总结部分需要强调异步编程的重要性，以及不同方法的选择场景，帮助用户在实际项目中做出合适的技术决策。需要确保回答准确、全面，同时避免过于技术化的术语，保持易懂。</think>### **JavaScript异步编程深度解析** --- #### **1. 同步 vs 异步的本质区别** - **同步执行** $$ \text{代码顺序执行} \Rightarrow \text{阻塞式处理} $$ ```javascript console.log("开始煮面"); const noodles = cookNoodlesSync(); // 阻塞30分钟 console.log("面条煮好了"); // 30分钟后执行 ``` - **异步执行** $$ \text{非阻塞架构} \Rightarrow \text{事件驱动模型} $$ ```javascript console.log("开始煮面"); cookNoodlesAsync(() => { console.log("面条煮好了"); // 30分钟后触发 }); console.log("我可以先切菜"); // 立即执行 ``` --- #### **2. JavaScript异步核心机制** **事件循环（Event Loop）工作流** ```mermaid graph TD A[调用栈] -->|执行同步代码| B(Web APIs) B -->|定时器/网络请求| C[任务队列] C -->|事件循环检查| D{调用栈是否空?} D -->|是| A D -->|否| C ``` **关键要素**： - **调用栈（Call Stack）**：同步代码执行场所 - **Web APIs**：浏览器提供的异步接口（`setTimeout`, `XHR`等） - **任务队列（Task Queue）**：宏任务（`setTimeout`）、微任务（`Promise`） - **事件循环**：持续检查调用栈与队列的调度器 --- #### **3. 异步编程演进史** | 阶段 | 技术方案 | 典型代码结构 | 主要问题 | |------------|--------------------|----------------------------------|----------------------------| | **青铜时代** | 回调函数 | `fs.readFile('a.txt', callback)` | 回调地狱（Callback Hell） | | **白银时代** | Promise | `.then().catch()` | 链式调用冗余 | | **黄金时代** | async/await | `try{ await } catch{}` | 需要ES7+环境支持 | | **未来趋势** | 顶层await + ES模块 | `const data = await fetch()` | 模块加载顺序控制 | --- #### **4. 关键技术实现对比** **回调函数 vs Promise vs async/await** ```javascript // 回调地狱示例 getUser(id, user => { getProfile(user, profile => { getOrders(profile, orders => { console.log(orders); }); }); }); // Promise链式调用 getUser(id) .then(user => getProfile(user)) .then(profile => getOrders(profile)) .then(orders => console.log(orders)) .catch(err => console.error(err)); // async/await终极方案 async function loadData() { try { const user = await getUser(id); const profile = await getProfile(user); const orders = await getOrders(profile); console.log(orders); } catch (error) { console.error("加载失败:", error); } } ``` --- #### **5. 微任务与宏任务的执行顺序** $$ \text{微任务优先级} > \text{宏任务} $$ ```javascript console.log('开始'); setTimeout(() => console.log('宏任务'), 0); Promise.resolve() .then(() => console.log('微任务1')) .then(() => console.log('微任务2')); console.log('结束'); /* 输出顺序： 开始 结束 微任务1 微任务2 宏任务 */ ``` **常见任务类型**： - **宏任务**：`setTimeout`, `setInterval`, `I/O`, UI渲染 - **微任务**：`Promise.then`, `MutationObserver`, `queueMicrotask` --- #### **6. 高级异步模式** **并行处理优化** ```javascript // 错误方式（顺序执行） const a = await fetchA(); const b = await fetchB(); // 需等待A完成 // 正确方式（并行执行） const [a, b] = await Promise.all([fetchA(), fetchB()]); ``` **竞速模式（race condition）** ```javascript const timeout = ms => new Promise((_, reject) => setTimeout(() => reject(new Error('超时')), ms)); await Promise.race([ fetchData(), timeout(5000) // 5秒超时机制 ]); ``` --- #### **7. 异步错误处理精髓** **多层级错误冒泡** ```javascript async function main() { try { await step1(); } catch (error) { console.error('步骤1失败:', error); await sendErrorReport(error); // 错误上报 throw new Error('流程终止'); // 继续向上冒泡 } } main().catch(finalError => { console.error('全局捕获:', finalError); }); ``` **finally的妙用** ```javascript let isLoading = true; try { await fetchData(); } finally { isLoading = false; // 无论成功失败都会执行 } ``` --- #### **8. 现代浏览器新特性** **Top-level await** ```html <script type="module"> const data = await fetch('/api/config'); // 模块顶层直接使用await initializeApp(data); </script> ``` **Web Workers多线程** ```javascript // main.js const worker = new Worker('task.js'); worker.postMessage(heavyData); worker.onmessage = e => console.log(e.data); // task.js self.onmessage = function(e) { const result = process(e.data); self.postMessage(result); }; ``` --- ### **实践建议** 1. **优先使用async/await**：代码可读性接近同步写法 2. **避免过度嵌套**：合理使用`Promise.all`/`Promise.any` 3. **错误边界处理**：在适当层级添加try/catch 4. **性能监控**：使用`performance.mark`测量关键异步操作耗时 5. **内存管理**：及时取消未完成的`fetch`请求（AbortController） ```javascript const controller = new AbortController(); // 超时自动取消 setTimeout(() => controller.abort(), 5000); fetch(url, { signal: controller.signal }).catch(err => { if (err.name === 'AbortError') { console.log('请求被主动取消'); } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值