原生js，編寫一個自定義的事件監聽

mylxsw 發布于2019-08-19 18:32 / 1456人閱讀

摘要：前幾天一哥們，去面試遇到到一個用原生編寫的事件監聽，原題是這樣子滴分割線然后就興致勃勃的去看一下，大神的可以直接忽略，就希望幫到一小部分的人就很開心啦簡單原理就是往里面的掛載一個函數，然后在里面調用這個函數，這么一說是不是覺得很簡單好直接上

前幾天一哥們，去面試遇到到一個用原生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）～～

很無恥的湊字數～～～很無恥的湊字數～～～很無恥的湊字數～～～很無恥的湊字數～～～很無恥的湊字數～～～很無恥的湊字數～～～很無恥的湊字數～～～很無恥的湊字數～～～

GPU云服務器云服務器 js 自定義觸發事件 js自定義一個偽數組自定義事件自定義一個類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79668.html

larkplayer: 插件化的 HTML5 播放器

摘要：是一款輕量級易擴展的播放器，是為解決一些中小型的視頻業務場景。同時各插件由于是面向的播放器接口，插件不知道插件的存在，因此能極大地降低各插件功能間的耦合。 larkplayer 是一款輕量級 & 易擴展的 html5 播放器，是為解決一些中小型的視頻業務場景。這些業務不一定需要大而全的解決方案，并且他們往往有自己的定制化需求。背景為什么要編寫 larkplayer？（注意，這里面有...

lijy91 2019-08-02 16:05 評論0 收藏0
larkplayer: 插件化的 HTML5 播放器

摘要：是一款輕量級易擴展的播放器，是為解決一些中小型的視頻業務場景。同時各插件由于是面向的播放器接口，插件不知道插件的存在，因此能極大地降低各插件功能間的耦合。 larkplayer 是一款輕量級 & 易擴展的 html5 播放器，是為解決一些中小型的視頻業務場景。這些業務不一定需要大而全的解決方案，并且他們往往有自己的定制化需求。背景為什么要編寫 larkplayer？（注意，這里面有...

linkin 2019-08-23 12:01 評論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