自定义JS事件

一、自定义事件需要以下三个方法:

1.document.createEvent()//创建事件

2.event.initEvent()//初始化事件

3.element.dispatchEvent()//触发事件

二、方法介绍:

1、createEvent()方法返回新创建的Event对象,支持一个参数,表示事件类型,具体见下表:

参数 事件接口 初始化方法
HTMLEvents HTMLEvent initEvent
MouseEvents MouseEvent
UIEvents UIEvent

2、initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。支持三个参数:initEvent(eventName, canBubble, preventDefault).分别表示:事件名称(String),是否可以冒泡(布尔值),是否阻止事件的默认操作(布尔值)。

3、dispatchEvent()就是触发执行了,dom.dispatchEvent(eventObject), 参数eventObject表示事件对象,是createEvent()方法返回的创建的Event对象。

例子:

<body>
    <button>click</button>
    <script>
        let btn = document.querySelector("button");
        btn.addEventListener("ycq",function () {
            alert("clicks");
        },false);
        let event = document.createEvent("MouseEvents");
        event.initEvent("ycq",true,true);
        btn.dispatchEvent(event);
    </script>
</body>

emmmmm 暂时先这么多吧。

猜你喜欢

转载自blog.csdn.net/ycq521131/article/details/82152981