JavaScript中的addEventListener自定义事件

2018-9-17 liyangweb.com 李杨 JavaScript

说到JavaScript事件,我们首先就能想到click事件、submit事件等等。但是有时候这些预定义的事件并不能满足我们的需求,比如在提供给第三方的SDK中。

由于SDK运行的环境非常复杂,第三方业务中有什么代码我们无法预知,这可能会导致事件冲突的问题,这时候我们就需要自定义事件来避免此类冲突了。

下面是一个自定义事件的demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event</title>
</head>
<body>
<button id="button" onclick="clickHere();">event</button>
<script>
    // 监听document的testEvent事件
    window.addEventListener("testEvent", function(obj){
        console.log(obj.data);
        alert("触发成功!")
    });
    function clickHere() {
        // 创建自定义事件
        var event = document.createEvent("HTMLEvents");
        // 初始化testEvent事件
        event.initEvent("testEvent", false, true);
        event.data = {"click":true};
        // 触发自定义事件
        window.dispatchEvent(event);
    }
</script>
</body>
</html>

标签: addEventListener自定义事件

评论:

头条
2018-09-19 23:50
文章不错非常喜欢

发表评论:

Powered by emlog 冀ICP备13011830号-1