自定义事件

最新推荐文章于 2021-06-15 13:52:44 发布
最新推荐文章于 2021-06-15 13:52:44 发布
阅读量322 收藏
点赞数
分类专栏： 前端 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43801564/article/details/85294489
版权

1、使用Event对象

<body>
<div class="box">
    <div id="item">item</div>
</div>
</body>
<script>
    let item=document.getElementById('item');
    
    // 通过Event定义一个自定义的事件名
    let et=new Event('tip');
    
    // 通过addEventListener给该事件添加回调函数
    item.addEventListener('tip',function(){
        alert('item=>tip1')
    });
    item.addEventListener('tip',function(){
        alert('item=>tip2')
    });
    
    // 通过调用dom元素的dispatchEvent方法触发（参数是Event对象）
    item.dispatchEvent(et);
</script>

这样，触发时会alert出tip1 和 tip2

2、使用CustomEvent

<script>
    let item=document.getElementById('item');
    
    //CustomEvent是Event的继承类,可以进行更多的配置
    let et=new CustomEvent('tip',{
    
        //detail中的数据可以在回调函数的event参数中读取到
        detail:{
            msg:'this is event'
        },
        bubbles: true,    //是否冒泡
        cancelable: false //是否触发默认事件
    });
    
    item.addEventListener('tip',function(e){
        console.log(e);
        alert('item=>tip1')
    });
    
    item.onclick=function(){
        item.dispatchEvent(et);
    }
</script>

把tip回调的e打印出来，可以获取到customEvent的detail
在这里插入图片描述

3、使用createEvent注册事件

	let item=document.getElementById('item');
    let ev=document.createEvent('HTMLEvents');
    ev.initEvent('tip');
    item.addEventListener('tip',function(){
        alert('tip')
    });
    item.dispatchEvent(ev);

首先通过createEvent创建一个新的事件对象，参数有以下几个（一般使用HTMLEvents）

参数事件接口初始化方法
HTMLEventsHTMLEventinitEvent()
MouseEventsMouseEventinitMouseEvent()
UIEventsUIEventinitUIEvent()

使用了createEvent之后，需要对事件初始化initEvent() (不同的参数对应不同的初始化方法)

initEvent(eventName,canBubble, preventDefault)三个参数，
分别是事件名称，是否冒泡，是否阻止默认操作

之后就可以通过addEventListener添加事件回调和dispatchEvent触发事件了

4、通过构造一个事件类

 class MyEvent{
        constructor(opts){
            this.eventList={};
        }
        
        addEvent(eventName,fn){
            if(!eventName||typeof eventName!=='string'){
                return
            }
            if(!fn||typeof fn!=='function'){
                return
            }
            if(!this.eventList[eventName]){
                this.eventList[eventName]=[]
            }
            this.eventList[eventName].push(fn);
        }
        
        removeEvent(eventName){
            if(!eventName||!this.eventList[eventName]){
                return
            }
            this.eventList[eventName]='';
        }
        
        fireEvent(eventName){
            if(!eventName||!this.eventList[eventName]){
                return
            }
            let eventLen=this.eventList[eventName].length;
            //依次执行放入数组中的事件回调函数
            for(let i=0;i<eventLen;i++){
                this.eventList[eventName][i].call(null);
            }
        }
    }
    let ev=new MyEvent();
    ev.addEvent('tip',function(){
        alert('tip')
    });
    ev.addEvent('tip',function(){
        alert('tip2')
    });
    ev.fireEvent('tip');

这样会依次弹出tip和tip2

=清风徐来=
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Nodejs中自定义事件实例
10-25
主要介绍了Nodejs中自定义事件实例,比较简单的一个例子,需要的朋友可以参考下
js自定义事件
@黄小泽的个人博客
05-23 1669
HTML5开发有时需要实现自定义事件，如预加载图片需要知道加载进度事件，本篇以图片预加载功能为例，介绍如何实现自定义事件。 下面的ImgsLoader工具类，可以实现多图片预加载。   &lt;script src="ImgsLoader.js"&gt;&lt;/script&gt;   然后将图片路径放到一个数组imgs中，然后调用load（imgs）方法即可，如   var ...
添加自定义事件
boysky0015的博客
07-10 445
添加自定义事件
为C#自定义控件添加自定义事件
12-22
　希望事件响应代码推迟到使用自定义控件的窗体里写。 　步骤一：新建一个用户控件，放两个按钮，Tag分别是btn1，btn2. 　这两个按钮的共用单击事件处理代码如下： using System; using System.Collections....
Vue组件之自定义事件的功能图解
08-28
本文通过图文并茂的形式给大家介绍了Vue组件之自定义事件的功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
C#自定义事件及用法实例
12-25
本文实例讲述了C#自定义事件及用法。分享给大家供大家参考。具体分析如下： 事件是C#中一个重要的内容，MSDN上有一个自定义事件的演示示例。我看了半天有点晕，所以新建了一个winform工程添加了一个按钮，然后找出...
FreeSwitch完整的自定义模块定义和改善自定义事件的例子
08-07
FreeSwitch完整的自定义模块定义和改善自定义事件的例子，详细介绍见博客：https://blog.csdn.net/xxm524/article/details/126211171
html 自定义js,JS 自定义 HTML 事件
weixin_32200729的博客
06-15 97
最近找到了关于自定义 HTML DOM 的事件的方法，分享一下。本人比较懒，不翻译了。NOTE : 低版本的 IE < 8 不支持Creating custom eventsEvents can be created with theEventconstructor as follows:varevent=newEvent('build');//Listenforthe...
CustomEvent自定义事件
前进者
11-14 1万+
javascript与HTML之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。通常大家都会认为事件是在用户与浏览器进行交互的时候触发的，其实通过javascript我们可以在任何时刻触发特定的事件，并且这些事件与浏览器创建的事件是相同的。 1、构造方法 CustomerEvent() 创建一个新的 CustomEvent 对象。 event = = new ...
Vue自定义事件
热门推荐
miaomiao博客
06-25 1万+
父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。 1、自定义事件 每个Vue创建的实例都会出现一个事件接口 var vm = new Vue({ el: '#app' }) 自定义事件的定义(发布) //vm.$on(自定义事件的名称，自定义事件的事件处理程序) vm.$on( 'aa', function () { ...
html 触发自定义事件,HUI - 自定义事件及事件触发
weixin_34121505的博客
06-09 708
使用addeventlistener方法为元素绑定自事件语法 : 原生dom.addeventlistener()示例 :testvarbtn=document.getElementById('btn');btn.addEventListener('click',function(){hui.toast('hi.');});使用 removeEventListener() 方法来移除 ad...
3.自定义事件
pureyou的博客
10-11 142
序 上一篇提到了模块化的思想，并且引入了按需加载模块的技术。然而对于实现细节却没有讲解，因为按需加载有点复杂，如果不引入观察者模式的设计思想，就会比较难实现。 使用观察者模式，我们实现dom事件类似的注册触发，这种方式可以很好的解耦，让模块间没有依赖。我们先讨论一下观察者模式是怎么回事，我们先引入几个场景： 如果两个模块之间交互，通常我们用a变量和b变量引用，如果a更改了b的属性，可以通过代码b.property = someValue; 如果a要更改b的行为，那么可以通过b.doSomething();
js 自定义事件
最新发布
05-31
JavaScript 中的自定义事件，是一种开发者可以创建自己的事件类型并且在需要的时候触发的机制。其基本流程如下： 1. 使用 CustomEvent 构造函数创建一个自定义事件对象，可以指定事件名称和一些可选的参数。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值