JavaScript 触发事件
在 JavaScript 中，原始方法 initEvent() 用于创建新事件。 最新更新添加了用于构建自定义事件的新关键字。 此外，在为 JavaScript 构建的清单中还有大量事件。
以下部分将预览预定义事件之一的示例及其触发方式。 还有一个定制的事件，将细节作为工作机制。 所以，让我们开始吧！
在 JavaScript 中触发预定义事件 在这里，我们将选择一个输入文本框进行值输入，然后使用 onclick 属性确保它等同于 addEventListener() 方法。
因此，我们获取输入字段的实例并通过条件块对其进行设置。 然后，无论何时触发点击事件，都会相应地获取和匹配输入。
因此，事件的功能被触发。
代码片段：
<!DOCTYPE html>
<html>
<head>
<title>Trigger event</title>
</head>
<body>
<input type="text" id="vals">
<button onclick="abc()">Submit</button>
<script>
function abc(){
var x = document.getElementById("vals").value;
if(x ==='1'){
console.log("1")}
else{
console.log("No!")
}
}
</script>
</body>
</html>
输出:
在 JavaScript 中创建自定义事件和触发器
我们将在冒泡事件传播中使用父子树来演示此实例。 主要任务是创建表单和文本区域元素，其中表单是父元素。
接下来，我们使用新的 CustomEvent() 创建一个事件。 我们的事件的名字很酷，它以气泡的对象为真，细节将是文本区域的值。
稍后，该表单将有一个 eventListener，它会说酷事件将在触发时处理其内容。 最后，我们使用 dispatchEvent() 触发事件，这是文本区域的事件监听器。
让我们预览一下代码和输出。
代码片段：
<!DOCTYPE html>
<html>
<head>
<title>Trigger event</title>
</head>
<body>
<form>
<textarea></textarea>
</form>
<script>
const form = document.querySelector('form');
const textarea = document.querySelector('textarea');
const event = new CustomEvent('cool', {
bubbles: true,
detail: { text: () => textarea.value }
});
form.addEventListener('cool', (e) => console.log(e.detail.text()));
textarea.addEventListener('input', (e) => e.target.dispatchEvent(event));
</script>
</body>
</html>
输出:
根据自定义事件，我们应该打印文本区域输入的值。 然后，最后，控制台显示输出已执行。
相关文章
在 JavaScript 中交换数组元素
发布时间：2023/06/05 浏览次数：52 分类：JavaScript
-
在这里，我们将看到所有可使交换任务更加灵活的优选示例。 让我们进入代码库！在 JavaScript 中使用临时变量交换数组元素 在下面的示例中，我们将采用两个具有相应元素的数组。
在 JavaScript 中检查数组中的所有值是否为真
发布时间：2023/06/05 浏览次数：179 分类：JavaScript
-
在本篇文章中，我们将学习如何在 JavaScript 中检查数组中的所有值是否为真。在 JavaScript 中使用 every() 方法检查数组中的所有值是否为真
在 JavaScript 中存储字节数组
发布时间：2023/06/05 浏览次数：80 分类：JavaScript
-
本文将讨论如何在 JavaScript 中存储字节数组。JavaScript 中的 ArrayBuffer 对象 字节数组或字节数组在 JavaScript 中称为 ArrayBuffer 对象。
JavaScript 中的深度复制数组
发布时间：2023/06/05 浏览次数：196 分类：JavaScript
-
在本文中，您将学习深拷贝和浅拷贝的概念。 本文还将介绍在 JavaScript 中对数组执行深拷贝的方法。JavaScript浅拷贝和深拷贝介绍 在 JavaScript 中，可以通过两种方式复制对象。
在 JavaScript 中将毫秒转换为日期
发布时间：2023/06/05 浏览次数：111 分类：JavaScript
-
在本文中，我们将通过示例学习如何使用 JavaScript 的默认日期对象及其方法从毫秒生成日期。
JavaScript Date.getTime() 方法
发布时间：2023/06/05 浏览次数：85 分类：JavaScript
-
在本文中，我们将讨论 Date 类中的 getTime() 方法是什么以及如何在不同的用例中获取时间。 此外，我们还将查看与 getTime() 类似的方法，即 now() 方法以及示例。
在 JavaScript 中获取选中或突出显示的文本
发布时间：2023/06/04 浏览次数：172 分类：JavaScript
-
本文将展示我们如何使用 DOM API 来让用户在屏幕上突出显示或选择文本。 DOM API 为我们提供了 getSelection() 方法，该方法允许我们获取用户选择的文本。
去除 JavaScript 中的空格
发布时间：2023/06/04 浏览次数：195 分类：JavaScript
-
在 JavaScript 中，我们可以借助 trim() 和 replace() 等默认 JavaScript 字符串方法从字符串中删除单个或多个空格。使用 JavaScript 中的 trim() 方法去除空格
在 JavaScript 中清理字符串
发布时间：2023/06/04 浏览次数：129 分类：JavaScript
-
这篇 JavaScript 教程文章解释了在 JavaScript 中清理数据的含义。 此外，它还讨论了可用于清理 JavaScript 中的字符串的不同包。
