js自定义事件的实现探索

我们一般所熟悉的事件,都是这样的:onclick,onmouseover,ontouchstart,onfocus...

但这里要讨论自定义事件的实现,包含:事件注册/监听、事件分发。

有两种方式去实现:

  1. 自己实现事件管理器:CustomEventManager
  2. 使用document.createEvent

先说第一种方式

CustomEventManager的实现

要实现一个完整的事件体系,必须包含2大功能:注册/监听、触发,用伪代码表示:

function CustomEventManager()
{
   
}

CustomEventManager.prototype.listen = function(){}
CustomEventManager.prototype.dispatch = function(){}

使用:

var eventManager = new CustomEventManager();
var div1 = document.getElementById(‘div1‘);
eventManager.listen(div1,‘song‘,function(e,params){e.innerHTML = params.title});
//..省略业务逻辑一万行,再某个条件下,触发song事件
eventManager.dispatch(‘song‘,{title:"我的滑板鞋"})

这段代码的意思是:div1这个dom监听了song事件,当触发song事件的时候,div1中显示"我的滑板鞋"。

有人可能有疑问,为何不直接在dispatch那个地方直接 `div1.innerHTML = "我的滑板鞋"`,这方面可以参考设计模式之观察者模式相关知识。

listen部分的代码其实应该是下面这种形式:

div1.listen(‘song‘,function(e,params){e.innerHTML = params.title})

要实现这样的形式,还得另外处理,而且关于CustomEventManager的实现远不是上面这几行代码可以实现的,可以用别人写好的库,当然也可以使用接下来要说的第二种方法。

使用javascript内置event对象

js其实内置了一套事件实现api,我们知道event对象,那么是不是自定义了event对象也就实现了自定义事件呢?差不多如此吧。先看一段代码:

div1 = document.getElementById(‘div1‘);
var evt = document.createEvent(‘HTMLEvents‘);//创建一个event对象
evt.initEvent(‘song‘);//初始化event对象,事件类型为song
div1.addEventListener(‘song‘,funtion(){alert(‘song‘)})//div1监听song事件
//...省略一万行
div1.dispatchEvent(evt);//在div1对象上触发song事件,如果div1监听了song事件那么就会有相应的处理。

这种有点类似于模仿click等事件的方式,你必须指定在某个元素上触发某个事件对象,系统会检查这个元素有没有监听这个事件(如 onclick="" 这种,代码中通过addEventListener实现)。

这种事件模型有点局限性,能满足简单的场景,它与观察者模式还是不同的,详细的使用方式可以查看手册,从createEvent方法开始了解。

使用event对象的好处我猜测是可以和html标签中的 onXXX 相结合。

时间: 2025-01-18 10:29:02

js自定义事件的实现探索的相关文章

漫谈js自定义事件、DOM/伪DOM自定义事件

一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义

js自定义事件、DOM/伪DOM自定义事件

一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义

js自定义事件模式

---恢复内容开始--- js事件用的最多的就是默认事件.不过有时候需要自定义事件来使用. 参照默认事件的模式,例如click事件,鼠标点击dom,先触发click事件,然后执行dom上的事件处理程序. <p>点我</p> document.getElementByTagName('p')[0].addEventLisener('click',()=>{ alert('click'); }) 同理,自定义事件也需要三个部分,即事件注册.事件触发.处理程序. 这里使用原型方法做

vue.js 自定义事件

<div id="app"> <h2>{{num}}</h2> <h1>全局组件</h1> <my-component @myclick="vueAdd"></my-component> <!-- 渲染全局组件--> </div> </body> </html> <script>/* */ Vue.component('my

转 js自定义事件——Event和CustomEvent

之前在学习自定义事件时,在MDN的Event.initEvent()页面顶端有写:该特性已从Web标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性. 作为替代,我们可以通过创建Event对象和CustomEvent对象来创建自定义对象.先从Event()对象开始. Event()——Event对象的构造函数 咱们可以看着下面这个例子去了解如何使用Event()创建一个自定义对象: 1 <script type="text/javascript

js自定义事件

var Event = { _listeners: {}, // 添加 addEvent: function (type, fn) { if(typeof this._listeners[type] === 'undefined') { this._listeners[type] = []; } if(typeof fn === 'function') { this._listeners[type].push(fn); } return this; }, // 触发 fireEvent: fun

js 自定义事件观察者模式(发布/订阅)

/* * 示例: * Event.create("namespace1").listen('click', function(a){ * console.log(a); * }); * Event.create("namespace1").trigger("click", 1); */ window.myEvent = (function() { var global = this, Event, _default = 'default'; Ev

js 自定义事件

<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title></title> <style> .button

js 自定义事件 document.createEvent

小demo 图片查看器 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片查看器</title> <style> ul{ list-style: none; display: flex; flex-wrap: wrap; } ul img{ width: 400px; } #mask{ posi