事件触发器---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函数

时间: 2024-11-05 12:11:54

事件触发器---dispatchEvent、fireEvent的相关文章

javascript的事件触发器介绍的实现_javascript技巧

事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQuery的ajax框架的一些自定义事件就必须由事件触发器来实现.当然,在一些特殊情况下,用事件触发器来触发事件比用户的实际操作来触发事件更方便. 对于实现事件触发器,浏览器都有原生的方法来支持,但是在兼容性上又有很大的出入,这种兼容性的问题完全在意料之中,IE有自己的方法,其他标准浏览

事件触发器监控网络更智能

"事件查看器"我想大家一定都非常熟悉了,通过事件查看器,我们可以查看服务器中发生的一些重要事件,如应用程序的运行情况.DNS服务器的运行情况,系统的资源调用.网络访问等详细信息.这些信息常常可以成为我们分析问题,解决问题以及发现潜在威胁重要参考资料,可以有效的帮助我们及时的对系统的故障.潜在威胁进行处理,确保服务器的正常运转,保障内部网络的安全.但是,通过事件查看器查看系统相关日志文件,必须是我们网络管理员主动去查看,并且还要细心的审核每一条记录,这样才能清楚的了解发生了什么事件.如果

PostgreSQL 事件触发器应用 - DDL审计

标签 PostgreSQL , 事件触发器 , DDL审计 , 表结构变更 , 建表等审计 背景 DDL语句的审计是非常重要的,目前PG的DDL审计记录在日志文件中.不便于查看. 为了让DDL事件记录到表中,方便查看,我们可以通过事件触发器来达到这个效果. 事件触发器审计DDL操作 事件触发器语法: Command: CREATE EVENT TRIGGER Description: define a new event trigger Syntax: CREATE EVENT TRIGGER

PostgreSQL DDL事件触发器

标签 PostgreSQL , event trigger , ddl 背景 PostgreSQL 9.3 将引入事件触发器, 与普通触发器不同的是, 事件触发器是数据库全局的触发器, 可以由DDL事件来触发. 例如可以用来实施DDL的操作审计,以及防止某些用户执行某些DDL,在某些表上面执行DDL等等. Unlike regular triggers, which are attached to a single table and capture only DML events, event

xaml-c#wpf的样式的事件触发器问题

问题描述 c#wpf的样式的事件触发器问题 请问大神这个问题是什么意思?应该如何改正? 解决方案 WPF 样式触发器 解决方案二: 就是个事件触发器-在鼠标进入时-触发某个按钮透明度的变化

DDL审计 , DDL逻辑复制 , 打造DDL统一管理入口 - PostgreSQL DDL 事件触发器应用

标签 PostgreSQL , event trigger , 事件触发器 , 用法详解 背景 DDL是非常重的操作,(锁大,或者会导致TABLE REWRITE导致消耗大量资源,影响大,例如DROP,TRUNCATE)也是数据库的使用过程中需要关注的. 通常企业会对DDL做一定的限制,不允许某些用户执行,或者不允许从网络登录的用户执行DDL. 同时DDL还有被审计的需求,所有的DDL可能都要记录到日志中. 构建逻辑复制的备库时,由于DDL不记录在REDO中,所以如果要复制DDL,通常的做法是使

wpf请问这段事件触发器代码为什么会异常?

问题描述 wpf请问这段事件触发器代码为什么会异常? <Button Grid.Row="1" Grid.Column="1" Margin="45,30,45,40" Content="确定" Name="button1"> <Button.Triggers> <EventTrigger RoutedEvent="Mouse.MouseEnter">

Oracle触发器6(建立系统事件触发器)

Oracle触发器6(建立系统事件触发器) (2012-02-14 09:23:36) 转载▼ <SCRIPT. $tag="触发器,建立,用于,事件,例程" $tag_code="64e2a8d9ae7359def02feebdbe14d783" $r_quote_bligid="71806002010108pu" $worldcup="0" var $worldcupball="0" ; <

jQuery中trigger 事件触发器的使用方法

定义和用法 trigger() 方法触发被选元素的指定事件类型. 触发事件 规定被选元素要触发的事件. 语法 $(selector).trigger(event,[param1,param2,...]) 例子  代码如下 复制代码 html <input id="result" type="hidden" value="0" /> js $(document).ready(function(e){     //自定义resultOK事