了解事件 - 最后一幕
了解事件 - 最后一幕
哦，还有我们是如何走到最后的。
如果你有很强的记忆力，那么你应该记住一个内置事件可以由用户的动作触发。例如，单击鼠标按钮、敲击键盘或触摸触敏表面是一些内置事件，可帮助确定应用程序中究竟发生了什么。
但是，有时，内置事件不足以跟踪应用程序的状态。例如，在使用电子商务网站时，我们单击一个对象并将其添加到购物车中。很简单，对吧？但是，添加到购物车的总商品的显示由父组件处理。因此，我们希望通知父组件更新其值，即“已添加项目，请显示更新的计数”。而且，我们是否有任何这样的 update-cart 事件要分派？唉!
但是，分步—— 自定义事件 拯救世界并统治七大王国！
如何在 JavaScript 中创建自定义事件？
我们有几种方法可以解决这个问题——
- 事件构造函数
- 自定义事件构造函数
事件构造函数
在上面的代码片段中，我们创建了一个事件， 新事件 ，通过将事件名称传递给 Event 构造函数。事件名称不区分大小写，因此 新事件 是相同的 新事件 和 N 新事件 ， ETC。
气泡 - 它指定事件是否应该向上传播到父元素。对于大多数原生 DOM 事件，它是 true，但对于自定义事件，它默认是 false。
如果您想了解什么是冒泡事件 这里 .
可取消 - 顾名思义，它表示是否应该取消活动。默认情况下，原生 DOM 元素是可取消的。这就是为什么我们可以使用 event.preventDefault() 来阻止事件的默认操作。如果自定义事件的可取消设置为 false，则调用 event.preventDefault() 将不会执行任何操作。
组成—— 它指定一个事件是否应该从影子 DOM 冒泡。但是，如果 'bubbles' 设置为 false，则 'composed' 的值无关紧要
快速解释 影子 DOM - 它有助于封装无法从主文档意外访问的 DOM 树的一部分。
自定义事件构造函数
如上所示，通过 CustomEvent 构造函数创建自定义事件与使用 Event 构造函数创建事件类似。
唯一的区别在于作为第二个参数传递给构造函数的对象，即 细节 .使用 细节 ，我们可以将数据传递给监听器。
与 Events 构造函数相比，这是一个额外的优势，因为在大多数用例中，我们希望从事件被分派到侦听器的位置发送数据。
如何分发事件？
- 我们使用 CustomEvent 创建了一个自定义事件。
- 我们使用 dispatchEvent() 将自定义事件分派到目标
- 我们向想要监听的元素添加了一个事件监听器。
这是一个简单的例子
我制作了一个待办事项清单，其中每次我们取消一项任务时，剩余的总任务数就会减少！
Source- https://github.com/rajashree23/events/tree/master/UnderstandingEvents-Part3
Source- https://github.com/rajashree23/events/tree/master/UnderstandingEvents-Part3
Source- https://github.com/rajashree23/events/tree/master/UnderstandingEvents-Part3
每次我们单击任何项目时，任务都会被删除，表示任务已完成。
我在 '列表'。 处理程序做了两件事——一是向目标元素添加一个“已完成”的 CSS 类，二是调度一个自定义事件来处理减少任务计数。
您可能有一个问题，我们可以在添加 CSS 类之后简单地减少计数，而不是使用自定义事件。当然，是的，我们本可以这样做。 但我在这里的目的是展示如何使用自定义事件来解耦在另一段代码完成后要执行的代码。
演示
Initial state
After clicking on 3 and 4
速览： 自定义事件也称为 “合成事件”
结束的想法
自定义事件有助于分离出有助于维护大型代码库的事件。例如，我们可以在单独的脚本中分离事件监听器。此外，我们可以为同一个自定义事件设置多个事件侦听器。这些只是自定义事件的一些优点。 VueJS、expressJS 等顶级 JavaScript 框架大量使用自定义事件。
随意玩弄我的代码以更好地理解 - https://github.com/rajashree23/events/tree/master/UnderstandingEvents-Part3
如果您想了解我之前关于理解事件的文章，请点击以下链接 -
第1部分- https://medium.com/behind-the-tech-chainwhiz/understanding-events-part-1-6624900e3f4
第2部分- https://medium.com/behind-the-tech-chainwhiz/understanding-events-part-1-6624900e3f4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
浙公网安备 33010602011771号