JavaScript中的addEventListener自定义事件

说到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>

上地五街的忧伤

JavaScript中的addEventListener自定义事件

3 comments: