js 自定义事件_js 自定义事件实现-优快云博客

本文详细介绍了在JavaScript中如何创建和使用自定义事件，包括通过`createEvent`创建事件对象，`initEvent`初始化事件属性，以及`dispatchEvent`触发事件。通过两个实例展示了自定义事件的整个流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js 自定义事件</title>
</head>
<body>
<button id="kw">click</button>
<script>
    window.onload = function () {
        // 方法一
        document.addEventListener('zyn', function () {
            console.log('自定义事件被触发了');
        });
        // 创建
        const evt = document.createEvent('HTMLEvents'); // HTMLEvents MouseEvents UIEvents
        // 初始化
        evt.initEvent('zyn', false, false);
        // 触发
        document.dispatchEvent(evt);




        // 方法二
        document.querySelector('#kw').addEventListener('zyn1', function () {
            console.log('自定义事件被触发了');
        });
        /**
         * @createEvent
         * @param {type}
         * @type {"MouseEvents", "MutationEvents", "HTMLEvents"}
         * @link https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent
         */


        const evt1 = document.createEvent('HTMLEvents'); // HTMLEvents MouseEvents UIEvents
        // 初始化
        /**
         *  @event initEvent
         *  @param {eventType,canBubble,cancelable}
         *  @eventType 字符串值。事件的类型
         *  @canBubble 事件是否起泡
         *  @cancelable 是否可以用 preventDefault() 方法取消事件。
         */
        evt1.initEvent('zyn1', false, false);
        /**
         * @dispatchEvent
         * @param {evt}
         * @evt 必需。要分派的 Event 对象。
         */
        document.querySelector('#kw').dispatchEvent(evt);
    }
</script>
</body>
</html>