事件触发器---dispatchEvent、fireEvent

最新推荐文章于 2024-04-23 17:04:17 发布

weixin_33898876

最新推荐文章于 2024-04-23 17:04:17 发布

阅读量219

点赞数

原文链接：https://yq.aliyun.com/articles/257445

版权

少废话，直接上代码

<body>
<button id="btn">点击</button>
<button id="btn2">点击</button>
<div id='hello'> hello</div>
<script>
    var btn = document.getElementById('btn')
    var btn2 = document.getElementById('btn2')
    var hello = document.getElementById('hello')
    btn.addEventListener('eating', function (event) {
        console.log('正在吃饭...')
    })
    btn2.addEventListener('eating', function (event) {
        console.log('正在吃饭...')
    })
    hello.addEventListener('sayHello', function (event) {
        console.log(event)
    })

    var event = document.createEvent('HTMLEvents')
    var event2 = document.createEvent('HTMLEvents')
    event.initEvent('eating', true, true)
    event2.initEvent('sayHello', true, true)
    btn.dispatchEvent(event)
    hello.dispatchEvent(event2)

    function fireEvent(element, event) {
        if (document.createEventObject) {
            var evt = document.createEventObject()
            return element.fireEvent('on' + event, evt)
        } else {
            var evt = document.createEvent('HTMLEvents')
            evt.initEvent(event, true, true)
            return !element.dispatchEvent(evt)
        }
    }
    fireEvent(btn, 'eating')
    fireEvent(btn2, 'eating')
    fireEvent(hello, 'sayHello')
</script>
</body>

给元素绑定自定义事件后，需要用document.createEvent方法创建事件，然后初始化自定义事件名，用给元素触发事件

这里分为IE浏览器和标准浏览器，IE浏览器为document.createEventObject()方法，具体见fireEvent函数