【JavaScript】如何自定义事件并触发

田本初

于 2024-02-22 22:15:00 发布

阅读量764

点赞数 9

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/owo_ovo/article/details/136226366

版权

JavaScript 专栏收录该内容

132 篇文章 3 订阅

订阅专栏

前言

有些教程中说使用 Event.initEvent() 创建事件，但是此方法已弃用，所以下文使用new Event()。

mdn官方文档中，明确说明Event.initEvent()弃用。

在这里插入图片描述

建议使用Event()构造函数，这里以chrome为例，兼容请很强，支持chrome15及以上（最新版本已经120+）。

在这里插入图片描述

Event()构造函数实现

一、创建事件对象

语法：event = new Event(typeArg, eventInit)

参数说明：

typeArg：DOMString 类型，表示所创建事件的名称。
eventInit：可选参数，EventInit 类型的字典。
接受以下字段：
bubbles：可选，Boolean类型，默认值为 false，表示该事件是否冒泡。
cancelable：可选，Boolean类型，默认值为 false，表示该事件能否被取消。
composed：可选，Boolean类型，默认值为 false，指示事件是否会在影子 DOM 根节点之外触发侦听器。

var event = new Event("change", { bubbles: true, cancelable: true, composed: false })

二、触发事件

语法：element.dispatchEvent(event)

element为要触发事件的dom元素，event为自定义事件对象。

案例（点击按钮，input的value发生change事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trigger Input Change Event</title>
</head>
<body>
    <input type="text" id="myInput">
    <button onclick="simulateInputChange()">点击触发input的change事件</button>

    <script>
        function simulateInputChange() {
            // 获取要触发事件的元素
            var inputElement = document.getElementById('myInput');
            
            // 创建 change 事件对象
            var event = new Event('change', {
                bubbles: true,
                cancelable: true
            });

            // 触发事件
            inputElement.dispatchEvent(event);
        }
        
        // 监听 change 事件
        document.getElementById('myInput').addEventListener('change', function() {
            console.log('Input输入框触发了change事件');
        });
    </script>
</body>
</html>