jQuery基础回顾——事件冒泡、移除事件、模拟事件
- 什么是冒泡
在页面上可以有多个事件，也可以多个元素响应同一个事件，假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同事<body>元素上也绑定了click事件，当单击内部<span>元素，即触发<span>元素的click事件，会输出3条记录，这就是由事件冒泡引起的。
示例代码
示例效果
在单击<span>元素的同时，也单击了包含<span>元素的元素<div>和包含<div>元素的<body>，并且每一个元素都会按照特定的顺序响应click事件。
- 事件冒泡引发的问题
事件冒泡可能会引起意料之外的效果，上例中，本来只想触发<span>元素的click事件，然而<div>和<body>元素的click事件也同时被触发了，因此，有必要对事件的作用范围进行限制，当单击<span>时，只触发该元素的click事件，当单击<div>时，只触发<div>元素的click事件。
想要阻止事件冒泡，只需要在对应事件的响应函数里返回 false（ return false;） 即可。
在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件，假设网页上有一个<button>元素，使用以下代码为该元素绑定多个相同的事件。
当单击按钮后，会出现下图所示的效果
示意动画
1、移除按钮元素上以前注册的事件
首先在网页上添加一个移除事件的按钮。
然后为按钮绑定一个事件，jQuery代码如下：
下面来看看off()方法的语法结构：
events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如\”click\”, \”keydown.myPlugin\”, 或者 \”.myPlugin\”.
selector:一个最初传递到.on()事件处理程序附加的选择器。
fn:事件处理程序函数以前附加事件上，或特殊值false.
具体说明如下：
1) 如果没有参数，则删除所有绑定的事件。
2) 如果提供了事件类型作为参数，则只删除该类型的绑定事件。
3) 如果把在绑定时传递的处理函数作为第2/3个参数，则只有这个特定的事件处理函数会被删除。
2、移除<button>元素的其中一个事件
首先需要为这些匿名处理函数指定一个变量，例如下面的jQuery代码：
然后就可以单独删除某一个事件了，jQuery代码如下：
另外，对于只需要触发一次，随后就立即要解除绑定的情况，jQuery提供了一种简写法——one()方法，one()方法可以为元素绑定处理函数，当处理函数出发一次后立即被删除。其语法结构同on()方法类似，使用方法也相同。
- 常用模拟
以上的例子都是用户必须通过单击按钮才能触发click事件，但是有时，需要通过模拟用户操作来达到单击的效果，例如在用户进入页面后，就触发click事件，而不需要用户主动单击。
在jQuery中，可以使用trigger()方法完成模拟操作，例如可以使用下面的代码来触发id为btn的按钮的click事件：
这样，当页面加载完毕后，就会立刻输出想要的效果，也可以直接用简化写法click()，来达到同样的效果。
- 触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件，此时传入的参数名为自定义事件的名。
- 传递数据
trigger(type,[data])方法有两个参数，第1个参数是要触发事件的类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递，通常可以通过传递一个参数给回调函数来区分这次事件是代码触发还是用户触发的：
示意
- 执行默认操作
trigger()方法触发事件后，会执行浏览器默认操作。
以上代码不仅会触发<input>元素绑定的focus事件，也会使该元素本身得到焦点（这是浏览器的默认操作）。
如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法——triggerHandler()方法。
该方法只会触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的focus事件，而不会得到焦点。
若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！
关注并转发后私信“jQuery基础材料”获取线下资料，包括完整基础资料、chm文档、示例代码及其他参考资料。
上一节：
下一节：
十大必须掌握的 Chrome 浏览器开发者工具
Chrome 提供的一些调试功能，在排查代码故障时非常有帮助。事实上，由于谷歌浏览器提供的调试工具太多，很多都被隐藏了起来，等待你去探索。
声明：本文已获作者Ferenc Almasi翻译授权。
作者 | Ferenc Almasi
译者 | 明明如月，责编 | 郭芮
头图 | CSDN 下载自东方 IC
出品 | CSDN（ID：CSDNnews）
以下为译文：
Chrome DevTools（开发者工具）团队每月（https://developers.google.com/web/updates/capabilities）都会在他们的网站上发布更新，你也可以在他们的官方 Twitter 账户（https://twitter.com/chromedevtools）上找到一些很棒的提示。如果你想了解更多关于 Chrome 提供的工具的信息，我强烈推荐查看这两个信息来源。
在这篇文章中，我收集了 10 个我经常使用但是别人可能不知道的功能。它们帮助我简化了工作流程，可以在更短的时间内完成更多的工作。
日志保持
这里先从在控制台中保持日志说起。假设在重新加载页面之前或导航发生时出现了问题，你会尝试登录控制台，但所有内容都被清除了。解决方法很简单，但我很久以前就不知道了：
在控制台中保持日志
事件监听器的断点
通常，当用户交互发生时会出现问题。捕捉这些事件来检查在交互中运行的位置和内容非常有帮助。幸运的是，我们可以通过访问 Sources 选项卡，用 Ctrl + P 打开一个 js 文件，并检查其中的相关事件：
为事件监听器添加断点
DOM 操作的断点
对于 DOM 操作也可以添加断点。通常可以断点在某节点接收到属性更改上，例如添加了某个 class 。在一个大型代码仓库中搜索相关代码将耗费大量时间，其实你可以简单地为元素添加一个断点，然后剩下的交给 DevTools 处理。
为 DOM 节点操作添加断点
代码覆盖率
有时候我们对代码进行性能优化，会导致很多代码没有用了但是还没及时清除。在覆盖工具的帮助下，你可以分析资源并查看哪些行没有执行。如果你关注的不是所有交互，只执行你所关注的交互操作有助于你获取准确的覆盖率。你可以点击 Ctrl + Shift + P 打开工具面板，然后点击重新加载图标开始记录，所有以红色显示的内容都不会被执行。
使用 DevTools 查看代码覆盖率
展示重新绘画
不必要的重绘也会导致性能问题。假设你的页面上有一个倒计时，每次更新都会导致整个页面重新绘制。你可以通过在 Render 选项卡中启用 \”paint flashing\” 来解决这些问题，并查看哪些元素触发了这些问题。
同样，Ctrl + Shift + P 会弹出工具栏。
在 Rendering 选项卡上启用重新绘制
动画审查
既然上面讨论了渲染，那么让我们来看看如何调试 CSS 动画。用 Ctrl + Shift + P 打开工具菜单，输入“ animation” 它将为你打开动画标签，这将记录任何发生在网站上的动画。你可以重播它们，看看它们的宽松程度，然后根据时间或持续时间调整：
在 DevTools 中调试动画
截屏
我们经常需要与其他人分享截图来验证更改。如果你不得不重复多个步骤，这个任务可能会消耗时间：
-
打开第三方应用程序
-
选定裁剪的部分
-
保存图片并发送
这可以在 DevTools 内部完成。你可以从整个页面、单个节点(被选中的节点)或视图中创建图像：
在 DevTools 中创建截图
黑盒
假设你正在调试一个问题，并且你的代码中有两个断点。你正在进行堆栈跟踪，你会发现堆栈信息中大多数来自核心框架文件，如 React 或 jQuery。为了避免在调试器中包含这些核心文件，你可以对它们进行黑盒处理，这意味着 DevTools 将跳过这些文件，以便你可以专注于自己的代码。
Devtools 中的脚本黑盒
本地覆盖
本地覆盖是我最喜欢的一个，我发现自己使用它越来越频繁。它是一个强大的工具，使你能够加载生产文件的本地副本，并使用它们来替代捆绑的副本。当一个问题只发生在特定的环境中而不能在本地复现时，这一点尤其有用。
你可以在“Source” 选项卡下启用 \”Overrides\”（重写）。如果你没有看到 Overrides 链接，点击 Page 右侧的锯齿图标。你可以将漂亮的打印文件复制到你本地文件并对其进行扩展。重写将通过页面重新加载保持。
在 DevTools 中覆盖文件
Lighthouse
我发现自己一直在使用 Lighthouse 面板，这是为了审计你的网站在各种指标：性能，PWA，可访问性，或搜索引擎优化。你还可以选择审计不同的设备以及模拟网络连接，它为你提供了哪些可以改进以及如何改进的参考。你可以在“Audits” 选项卡下进入“灯塔”，如果你没有看到标签，只需点击锯齿符号来显示隐藏的标签。
生成报告后，可以将结果保存为 JSON 文件，稍后导入以进行比较。
上面是必须知道的 10 个 Chrome 开发工具特性，它们帮助我简化了工作流程，并且在更短的时间内完成了更多的工作。
你每天使用的 Chrome 开发者工具的功能是什么? 请在评论中告诉我们。
原文：https://medium.com/better-programming/10-must-know-features-of-chrome-devtools-94e4a4e530c5
作者简介：Ferenc Almasi，匈牙利前端开发者，热衷于开发和设计新的交互式应用程序。他还喜欢尝试新技术，创造简单而有吸引力的东西。
译者：明明如月，知名互联网公司 Java 高级开发工程师，CSDN 博客专家。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
