您的当前位置:首页正文

js自定义事件的实现

2022-06-15 来源:知库网

1、指定谁是发布者。

2、给发布者添加一个缓存列表来存储回调,以便通知订阅者。

3、发布消息时,发布者会遍历这个列表,依次触发存储在其中的订阅者回调函数。

实例

const salesOffices = {} // 定义售楼处
 
salesOffices.clientList = [] // 缓存列表,存放订阅者的回调函数
 
salesOffices.listen = function(fn) { // 增加订阅者
    this.clientList.push(fn) // 添加进缓存列表
}
 
salesOffices.trigger = function() { // 发布消息
    for(let i = 0, fn; fn = this.clientList[i++];) {
        fn.apply(this, arguments) // arguments 是发布消息时带上的参数
    }
}
 
 
// 测试
 
salesOffices.listen((price, squareMeter) => { // 小明订阅消息
    console.log('价格=' + price)
    console.log('squareMeter=' + squareMeter)
})
 
salesOffices.listen((price, squareMeter) => { // 小红订阅消息
    console.log('价格=' + price)
    console.log('squareMeter=' + squareMeter)
})
 
salesOffices.trigger(2000000, 88)
salesOffices.trigger(3000000, 110)

以上就是js自定义事件的实现,希望对大家有所帮助。更多js学习指路:

推荐操作环境:windows7系统、jquery3.2.1版本,DELL G3电脑。

字库网还为您提供以下相关内容希望对您有帮助:

使用Javascript如何实现自定义事件机制

首先来实现事件的绑定,事件绑定必须要指定事件的类型和事件的处理函数。那么除此之外还需要什么呢?我们是自定义事件,不需要像原生事件一样指定是冒泡阶段触发还是捕获阶段触发,也不需要像jQuery里一样可以额外指定那些元素触发。而事件函数里面this一般都是当前实例,这个在某些情况下可能不适用,我们需要重新指定事件处理函...

js怎么自定义事件,并能让用on事件监听

在视频播放的时候,能够用on监听事件的触发,如下:player.on('pause',function(){ console.log('视频暂停');})player.on('ended',function(){ console.log('视频结束')})这个是什么原理,怎么自定义类似pause、ended的事件,并能够用on监听?麻烦指教 相当于来说你要维护一个事件队列。playe...

Vue.JS的自定义指令应该如何使用

你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令。定义对象需要提供一些钩子函数(全部可选):bind: 仅调用一次,当指令第一次绑定元素的时候。update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值;以后每当绑定的值发生变化就会被调用,获得新...

js 里自定义事件_events:{} this._events[type]是什么意思??_百度知...

_events的type属性,或者_events的type方法的返回值。在JavaScript中,每个对象可以看作是多个属性(方法)的集合,引用一个属性(方法)很简单,即:对象名.属性(方法)名 --- 除此之外,还可以用方括号的形式来引用:对象名["属性(方法)名"]注意,这里的方法名和属性名是一个字符串,而非原先点...

js如何监听一个自定义事件js如何监听一个自定义事件

JS阻止浏览器默认行为的方法?阻止浏览器默认行为和防止事件传播主要通过先下面两个方法实现:event.preventDefault():取消浏览器对当前事件的默认行为,比如点击链接后,浏览器跳转到指定页面,或者按一下空格键,页面向下滚动一段距离。event.stopPropagation():阻止事件在DOM中继续传播,防止再触发定义在别...

vue.js中怎样用onload事件

1、首先创建一个名称为onload的html文件,如下图所示。2、设置标题为 javascript onload,如下图所示。3、在body标签 中加入onload事件,并在事件中加入自定义函数 myonload。4、在文档区域加入一个h 元素,加入文本内容“页面加载完成显示页面内容”,当页面加载完成 后 显示该内容。5、创建一个自定义...

如何用JS实现一个按钮事件:单击一下时打开对话框,再单击一下时关闭这个...

var tmp = "";function test(){if(tmp == ""){tmp = window.open("你需要打开的网址");}else{tmp.close();tmp = "";}}这样就能按钮点一下打开,再点一下关闭

...在点击一个按钮后打开的另一个页面上点击右键实现是我自定义的...

1.页面复zhidao制有一个id为c2的div,下面有一个子div,下面有一个按钮,事件是用来点击100个adddiv。2.在event函数中,定义一个内内容为degreediv字符的字符串变量。3.然后使用jquery的append将已知的div字符串添加到c2div,如下容所示。4.运行页面,现在只看到一个div,如下图所示。5.单击下面的...

js自定义鼠标经过事件函数

window.onload = function(){var menu = document.getElementById('menu');var img = menu.getElementsByTagName('img');menu.onmouseout = function(){for(var i=0;i<img.length;i++){var src = img[i].src;if(src.indexOf('_over')!=-1) {var index = src.lastIndexOf('.');...

Vue.js 最佳实践清单,照亮你的开发之路

2. 保持一致性,自定义事件名使用kebab-case格式,便于监听。3. 避免在created和watch中重复调用方法,统一使用watch。4. 模板循环中务必使用:key,确保循环稳定和错误排查。5. 在mixins中使用$_前缀避免属性冲突,提升代码可读性。6. mixin内的属性应在mixin内部定义,确保Vue.js的智能处理。7. 单...

显示全文

猜你还关注