原生js，编写一个自定义的事件监听

mylxsw 发布于2019-08-19 18:32 / 1300人阅读

摘要：前几天一哥们，去面试遇到到一个用原生编写的事件监听，原题是这样子滴分割线然后就兴致勃勃的去看一下，大神的可以直接忽略，就希望帮到一小部分的人就很开心啦简单原理就是往里面的挂载一个函数，然后在里面调用这个函数，这么一说是不是觉得很简单好直接上

前几天一哥们，去面试遇到到一个用原生js 编写的事件监听，

原题是这样子滴！

function EventDispatcher()
{
}
 
/**
 * @param {string} eventStr
 * @param {Function} callBack
 * */
EventDispatcher.prototype.addEventListener = function(eventStr, callBack)
{
};
 
/**
 * @param {string} event
 * @param {*=} body
 * */
EventDispatcher.prototype.dispatchEvent = function(event, body)
{
};
 
var d = new EventDispatcher();
function callback(e) {
console.log(‘callback fired’);
console.log(‘Event body: ’+e.body);
}
d.addEventListener(‘testEvent’, callback);
d.dispatchEvent(‘testEvent’, ‘testMessage’);

//expexted console output:
//callback fired
//Event body: testMessage

－－－－－－－－－－－－－－－分割线－－－－－－－－－－－－－－－－－－

然后～～～就兴致勃勃的去看一下，大神的可以直接忽略，

就希望帮到一小部分的人～～就很开心啦！

简单原理就是往addEventListener 里面的type挂载一个函数，然后在dispatchEvent里面调用这个函数，这么一说是不是觉得很简单???

好直接上代码！！！

function EventDispatcher() {
    this.events = {};
}
            
EventDispatcher.prototype.addEventListener = function(type, handler) {
    if (typeof handler != "function") return;
    this.events[type] = handler;
};
            
EventDispatcher.prototype.dispatchEvent = function(type, body) {
    var e = {};
    e.body = body;
    this.events[type](e);
};
            
var d = new EventDispatcher();
            
d.addEventListener("testEvent", function(e){
    console.log("callback fired-----" + e.body);
});
            
d.dispatchEvent("testEvent", "213123123");

完毕收工（总觉得有点像订阅发布的意思2333）～～

很无耻的凑字数～～～很无耻的凑字数～～～很无耻的凑字数～～～很无耻的凑字数～～～很无耻的凑字数～～～很无耻的凑字数～～～很无耻的凑字数～～～很无耻的凑字数～～～

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79668.html

larkplayer: 插件化的 HTML5 播放器

摘要：是一款轻量级易扩展的播放器，是为解决一些中小型的视频业务场景。同时各插件由于是面向的播放器接口，插件不知道插件的存在，因此能极大地降低各插件功能间的耦合。 larkplayer 是一款轻量级 & 易扩展的 html5 播放器，是为解决一些中小型的视频业务场景。这些业务不一定需要大而全的解决方案，并且他们往往有自己的定制化需求。背景为什么要编写 larkplayer？（注意，这里面有...

linkin 2019-08-23 12:01 评论0 收藏0
larkplayer: 插件化的 HTML5 播放器

摘要：是一款轻量级易扩展的播放器，是为解决一些中小型的视频业务场景。同时各插件由于是面向的播放器接口，插件不知道插件的存在，因此能极大地降低各插件功能间的耦合。 larkplayer 是一款轻量级 & 易扩展的 html5 播放器，是为解决一些中小型的视频业务场景。这些业务不一定需要大而全的解决方案，并且他们往往有自己的定制化需求。背景为什么要编写 larkplayer？（注意，这里面有...

lijy91 2019-08-02 16:05 评论0 收藏0
详解JS事件 - 事件模型/事件流/事件代理/事件对象/自定义事件

摘要：取消事件的默认行为。阻止事件的派发包括了捕获和冒泡阻止同一个事件的其他监听函数被调用。事件模型 DOM0 级事件模型 -没有事件流，这种方式兼容所有浏览器 // 方式一将事件直接通过属性绑定在元素上 / 方式二获取到页面元素后，通过 onclick 等事件，将触发的方法指定为元素的事件 var btn = document.getElementById(btn) btn....

URLOS 2019-08-23 17:07 评论0 收藏0
少女风vue组件库制作全攻略~~

摘要：组件监听自定义事件。组件触发自定义事件。生命周期钩子函数，后组件的所有的事件监听器会被移除。技术点总结组件设计的思想包括单数据流事件中心，核心是组件通信。完善给弹出日期面板和关闭日期面板增加组件自定义事件即调用触发和事件。预览组件库官网 github地址如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈，请勿在生产环境中使用，供学习&交流~~ showImg(https://user...

springDevBird 2019-05-21 19:19 评论0 收藏0