创建并触发自定义事件
使用 .trigger() 和 .on() 设计并实现自定义事件，以解耦组件、编写更清晰的代码，并支持应用不同部分之间的灵活通信。
创建并触发自定义事件 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 3 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。
自定义事件简介
欢迎！在本课中，您将学习如何在 jQuery 中创建和管理自己的自定义事件。这是一种让代码更加有条理且灵活的强大方式。
您可以把自定义事件看作网页应用不同部分之间可以发送和接收的特殊消息。这样，它们无需直接关联也能相互通信。
为什么使用自定义事件？
为什么要使用自定义事件？它们有助于解决一个常见问题：紧耦合。当组件紧密耦合时，修改代码的一部分可能会破坏另一部分。
- 解耦：组件无需了解彼此的内部工作方式。
- 代码更清晰：与特定操作相关的逻辑会集中在一起。
- 灵活性：无需修改“发送方”，即可轻松添加或移除监听器。
`.trigger()` 方法
要“发送”或“触发”自定义事件，可以使用 jQuery 的 .trigger() 方法。您可以在 jQuery 对象（元素或 document）上调用它，并将事件名称作为字符串传入。
事件名称可以由您任意选择，例如 'dataLoaded' 或 'itemAdded'。
触发事件演示
让我们看看 .trigger() 的实际效果。点击按钮时，我们将在按钮上触发一个名为 'myCustomEvent' 的自定义事件。目前不会发生任何事情，因为还没有监听器！
<!-- HTML assumed to be present -->
<button id="triggerButton">Trigger Event</button>
<script>
$(document).ready(function() {
$('#triggerButton').on('click', function() {
// Fire our custom event on the button itself
$(this).trigger('myCustomEvent');
console.log('myCustomEvent triggered!');
});
});
</script>使用 .on() 进行监听
要“接收”或“监听”自定义事件，可以使用熟悉的 .on() 方法。它与内置事件（例如 'click'）的用法类似：指定事件名称，以及事件触发时要运行的函数。
您可以在触发事件的同一元素上进行监听，也可以在父级元素上进行监听，甚至可以在 document 本身上监听全局事件。
触发与监听示例
现在，让我们结合使用 .trigger() 和 .on()。点击按钮，您将看到消息出现，这说明我们的自定义事件已经被触发并成功监听到！
<!-- HTML assumed to be present -->
<button id="myButton">Click Me</button>
<p id="statusMessage">Status: Waiting...</p>
<script>
$(document).ready(function() {
// 1. Listen for 'buttonClicked' on the button
$('#myButton').on('buttonClicked', function() {
$('#statusMessage').text('Status: Custom event received!');
});
// 2. When the button is clicked, trigger 'buttonClicked'
$('#myButton').on('click', function() {
$(this).trigger('buttonClicked');
});
});
</script>通过事件传递数据
如果可以随事件一起传递数据，自定义事件会更加实用。您可以在事件名称之后向 .trigger() 传入额外参数。这些参数会传递给您的事件处理函数。
- 处理函数的第一个参数始终是事件对象。
- 后续参数则是通过
.trigger()传递的数据。
自定义事件数据演示
这里，我们触发一个 'dataReady' 事件，并传入一个字符串和一个对象。监听器会接收这些数据并将其显示出来。这就是组件共享信息的方式！
<!-- HTML assumed to be present -->
<button id="loadData">Load Data</button>
<p id="output"></p>
<script>
$(document).ready(function() {
// Listen for 'dataReady' and extract the passed data
$(document).on('dataReady', function(event, message, details) {
const outputText = `Message: ${message}<br>Details: ${details.status} for ${details.item}`;
$('#output').html(outputText);
});
// When button clicked, trigger 'dataReady' with data
$('#loadData').on('click', function() {
const msg = 'Data successfully loaded!';
const data = { status: 'complete', item: 'report' };
$(document).trigger('dataReady', [msg, data]);
console.log('Data event triggered!');
});
});
</script>通过解耦改进应用
使用自定义事件进行通信，有助于构建更加模块化且易于维护的应用。设想有一个“购物车”组件和一个“商品展示”组件。
- 添加商品时，“商品展示”组件会触发
'productAdded'。 - “购物车”组件监听
'productAdded'，并更新自身。
两个组件都不需要了解对方的内部方法，只需要遵循事件约定即可。
检查您的理解
以下哪些说法正确描述了使用 .trigger() 和 .on() 配合自定义事件的好处或用法？
回顾：自定义事件
做得很好！您已经学会了如何在 jQuery 中创建和管理自定义事件。下面是简要总结：
- 是什么：自定义事件是供应用组件使用的用户定义消息。
- 为什么：它们能促进解耦，从而让代码更加清晰、灵活。
- 如何做：使用
.trigger('eventName', [data])触发事件。 - 如何做：使用
.on('eventName', function(event, data) { ... })监听事件。
掌握自定义事件，是构建可靠且可扩展的 jQuery 应用的关键一步！
常见问题解答
「创建并触发自定义事件」课时是免费的吗？
是的 — 「创建并触发自定义事件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。
「创建并触发自定义事件」这节课中我会学到什么？
使用 .trigger() 和 .on() 设计并实现自定义事件，以解耦组件、编写更清晰的代码，并支持应用不同部分之间的灵活通信。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 jQuery Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 3 节。
「创建并触发自定义事件」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 jQuery Academy 课中编写并运行代码吗？
能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。