自定义事件 Event 、CustomEvent的使用

 

 

通过Event和dispathEvents触发自定义事件

 

    <span id="btn">获取</span>
    <script>
        var event = new Event("build");
        var ele = document.getElementById("btn");
        
        ele.addEventListener("build", function(){
            alert("build")
        }, false)

        ele.dispatchEvent(event)
    </script>

 

 

还可以通过CustomEvent 高度自定义事件，传输参数。

 

    <span id="btn">获取</span>
    <script>
        var event = new CustomEvent("build", {
            detail: {
                data: new Date().getDate()
            },
            bubbles: true,    //是否冒泡
            cancelable: false //是否取消默认事件
        });

        var ele = document.getElementById("btn");
        
        ele.addEventListener("build", function(e){
            console.log("今天是" + e.detail.data + "日")
        }, false)

        ele.dispatchEvent(event); // 触发事件
    </script>