自定义事件

1、可以通过new Event创建使用

   window.onload = function () {
            var myEvent=new Event('xing',{"bubbles":true, "cancelable":false,'composed':true}); //"bubbles"，可选，Boolean类型，默认值为 false，表示该事件是否冒泡。"cancelable"，可选，Boolean类型，默认值为 false， 表示该事件能否被取消。"composed"，可选，Boolean类型，默认值为 false，指示事件是否会在影子DOM根节点之外触发侦听器。
            document.addEventListener('xing', function () {
                console.log('自定义事件')
            })
            document.dispatchEvent(myEvent);
        }

注释：1、可以通过new Event创建事件

　　　2、dispatchEvent触发事件

2、使用new CustomEvent创建使用

    var myEvent = new CustomEvent('xing', {
                detail: 123 //detail是参数自定字段名
            });
            document.addEventListener('xing', function (e) {
                console.log(e.detail)
            })
            document.dispatchEvent(myEvent);

3、使用document.createEvent

<body>
    <button id="btn">点击</button>
    <script type="text/javascript">
        window.onload = function () {
            var myEvent = new CustomEvent('xing', {
                detail: 123 //detail是参数自定字段名
            });
            let btn = document.querySelector('#btn');

            btn.addEventListener('xing', function (e) {
                console.log(e)
            })
            btn.onclick=function(){
                btn.dispatchEvent(myEvent);
            }
        }
    </script>
</body>

　　

posted on 2021-01-25 10:36  随心的博客  阅读(145)  评论(0)    收藏  举报