Javascript自定义事件更改回调参数

Javascript custom event change callback argument

本文关键字：回调 参数 自定义 事件 Javascript      更新时间：2023-09-26

我想写一个自定义事件，并在其回调函数中打印到控制台obj.name

但我遇到了一个错误，需要将obj名称获取为obj.detail.text.name

如何使用obj.name行代码而不是obj.detail.text.name 解决并打印

目前obj在回调中的结构是：

obj

自定义事件{isTrusted:false}气泡：错误cancelBubble:false可取消：falsecurrentTarget:WindowdefaultPrevented:false细节：对象eventPhase:2isTrusted:falsisTrusted:falsepath:Array[1]返回值：truesrc元素：Windowtarget:WindowtimeStamp:14462115160435类型："eat:done"proto：CustomEvent

您可以使用自定义属性来增强event object（将其与lodash合并或自己完成）。下面的例子可能会给你一些启示；

// define the event
var event = new CustomEvent('test');
// add your custom arguments
event.customAttr = 'foo';
//the listener
window.addEventListener('test', function (e) {console.log(e)});
// fire it
window.dispatchEvent(event);
// logs: CustomEvent {isTrusted: false, customAttr: "foo"}

注册自定义事件时，触发时返回的值类型为CustomEvent。

这种混淆在您的命名中也很明显。代替：

MyEventsManager.on('eat:done', function(person){});

你实际上得到了：

MyEventsManager.on('eat:done', function(event){});

如果您想使用CostumEvents，这是唯一的方法（如果不使用CustomEvent对象，就无法使用自定义事件）。

也许你正在寻找更简单的东西，比如回调管理器：

function EventsManager(){
    var callbacks = {};
    return {
        on: function(eventName, callback, context){
            if(callbacks[eventName])
                callbacks[eventName].push(callback.bind(context));
            else
                callbacks[eventName] = [callback.bind(context)];
        },
        trigger: function(eventName, data){
            for(var i=0; callbacks[eventName] && i < callbacks[eventName].length; i++)
                callbacks[eventName][i](data);
        }
    }
}
相关文章：