事件触发器---dispatchEvent、fireEvent

简介:
少废话,直接上代码
<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函数

相关文章
|
6月前
|
存储 前端开发 JavaScript
简单实现一个事件触发器
简单实现一个事件触发器
91 0
|
3月前
|
消息中间件 运维 Serverless
函数计算产品使用问题之如何判断从函数调用获取到的事件是由哪个触发器发出的
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
5月前
|
运维 Serverless 数据处理
函数计算产品使用问题之OSS触发器是否只支持事件处理函数
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
6月前
|
SQL 数据库
10. 触发器和事件
10. 触发器和事件
|
6月前
|
监控 Oracle 安全
Oracle用户事件触发器:数据库世界的“福尔摩斯”
【4月更文挑战第19天】Oracle用户事件触发器是数据库中的监控机制,类似于“福尔摩斯”,在用户执行特定操作时自动触发。它们关注用户行为而非数据变化,可用于权限检查、安全监控、性能优化等。通过DDL语句创建,需注意逻辑清晰、条件合适及定期更新,以适应数据库变化和业务发展。掌握其使用能有效保障数据安全与稳定。
|
11月前
|
图形学
触发器事件
触发器事件
|
存储 SQL 关系型数据库
触发器和事件自动化的讲解
触发器和事件自动化的讲解
134 0
|
设计模式 JavaScript 索引
Node.js精进(4)——事件触发器
Node.js精进(4)——事件触发器
|
存储 SQL 关系型数据库
【MYSQL百炼成圣】金刚不坏篇——事件(定时器)和触发器
【MYSQL百炼成圣】金刚不坏篇——事件(定时器)和触发器
307 0
【MYSQL百炼成圣】金刚不坏篇——事件(定时器)和触发器
|
存储 关系型数据库 MySQL
mysql 存储过程、触发器、视图、事件
mysql 存储过程、触发器、视图、事件
126 0