如何将类内Fancytree的activate事件传递到外部对象的MyFunction？

有几种简单的方法可以将MyFunction与Fancytree的activate事件关联起来，以下是具体实现：

方法一：初始化时传入回调函数 #

修改你的FTree2类，让Init方法支持接收自定义的激活回调，外部可直接传入MyFunction：

class FTree2 {
    constructor(xparent) {
        this.xparent = xparent;
    }

    Init(params) {
        // 从参数中获取外部回调，默认空函数避免报错
        const onActivate = params?.onActivate || function(){};
        
        this.objtree = $(this.xparent).fancytree({
            extensions: ["dnd", "filter"],
            activate: function(event, data) {
                alert("activate");
                // 调用外部传入的回调
                onActivate(event, data);
            }
        });
    }

    addNode(title) {
        var tree = $.ui.fancytree.getTree(this.xparent);
        var parent = tree.getRootNode();

        var node = parent.addChildren({
            title: title,
            folder: false,
        });
    }
}

使用时传入MyFunction：

var ftree = new FTree2("#tree");
ftree.Init({
    onActivate: MyFunction
});

ftree.addNode("first");
ftree.addNode("second");

function MyFunction(event, data) {
    alert ("node activated");
}

方法二：触发自定义事件，外部监听 #

在FTree2的activate事件中触发自定义事件，外部通过监听该事件执行MyFunction：

class FTree2 {
    constructor(xparent) {
        this.xparent = xparent;
    }

    Init(params) {
        this.objtree = $(this.xparent).fancytree({
            extensions: ["dnd", "filter"],
            activate: function(event, data) {
                alert("activate");
                // 触发自定义事件，携带Fancytree的事件和数据
                $(this).trigger('treeNodeActivated', [event, data]);
            }
        });
    }

    addNode(title) {
        var tree = $.ui.fancytree.getTree(this.xparent);
        var parent = tree.getRootNode();

        var node = parent.addChildren({
            title: title,
            folder: false,
        });
    }
}

外部监听自定义事件：

var ftree = new FTree2("#tree");
ftree.Init();

ftree.addNode("first");
ftree.addNode("second");

// 监听自定义事件
$("#tree").on('treeNodeActivated', function(event, ftEvent, ftData) {
    MyFunction(ftEvent, ftData);
});

function MyFunction(event, data) {
    alert ("node activated");
}

方法三：直接通过Fancytree实例绑定事件 #

利用Fancytree的事件绑定API，在外部直接给树实例绑定activate事件：

var ftree = new FTree2("#tree");
ftree.Init();

// 直接绑定fancytreeactivate事件
ftree.objtree.on('fancytreeactivate', MyFunction);

ftree.addNode("first");
ftree.addNode("second");

function MyFunction(event, data) {
    alert ("node activated");
}

以上三种方法都可以实现需求，你可以根据自身代码结构选择最合适的方式。

内容的提问来源于stack exchange，提问作者Superdatel