时间戳

首页 > 解决方案 > 将任意回调函数附加到 dom 元素的最佳方法？

javascript - 将任意回调函数附加到 dom 元素的最佳方法？

问题描述

以下（vanillajs）代码工作正常

// library code:
let close_cb;   // nasty global var...

...
    let tree = document.createElement('ul');
    tree.addEventListener('click', function(event) {
        ...
//      let close_cb = tree.getAttribute('CLOSE_CB');
//      let close_cb = tree.onchange;
        close_cb(leaf.id, ', so there');

// user code:
    function my_close_cb(id, msg) {
        const footer = document.querySelector('footer');
        footer.innerHTML = id + ' is closed' + msg;
    }   
//  tree.setAttribute('CLOSE_CB',my_close_cb);
//  tree.onchange = my_close_cb;
    close_cb = my_close_cb;

但是注释掉的 s/getAttribute 代码失败，getAttribute 将“function my_close_cb(...”的全文放在本地 close_cb 中。

注释掉的 onchange hack 确实有效，但至少可以说感觉非常狡猾，尽管它肯定更接近我所追求的。

请注意，“库代码”是手写的并且完全在我的控制之下，而“用户代码”旨在被转译或以其他方式由机器生成，因此将 my_close_cb 更改为接受单个事件参数将是完全不可行的。

将接受任意参数集的任意回调函数附加到 dom 元素的最佳方法是什么？

标签： javascript

解决方案

您可以将纯 json 属性附加到 DOM 元素。

document.body.callback = function cb(text) { console.log(text); };
document.body.callback("hello world");

推荐阅读