无法修改 CustomEvent 数据

Question

每次单击附加不同数据的 div 时，我都需要触发自定义事件。

这是我的代码（ JSFiddle ）的简化变体：

<div onclick="selectItem(Math.random())">click me</div>

<script>
function selectItem(id) {
    var event_data = {
        myid: id
    };

    if (!arguments.callee.event)
        arguments.callee.event = new CustomEvent("selectItem", {detail: event_data});

    arguments.callee.event.detail = event_data; // no success here

    document.dispatchEvent(arguments.callee.event);
}

document.addEventListener("selectItem", function(event) {
    console.log(event.detail); // same thing all the time :(
});
</script>

但在事件侦听器函数中，每次触发事件时我都会收到相同的数据。我之前尝试更改事件dispatchEvent，但似乎它是只读对象。

每次点击 div 时是否有其他选项可以发送不同的数据？

Answer 1

原因是事件的详细属性可以是任何对象，但它们是只读的，即只能在创建事件时设置它们。它专门用于提供有关事件的详细信息，而不是为每个调度附加数据事件的。

接口 CustomEvent { 只读属性任何详细信息；};

data也许您可以在每次调度期间为事件设置一个自定义属性并访问该属性。

尝试：

function selectItem(id) {
        var event_data = {
            myid: id
        };

        if (!arguments.callee.event) arguments.callee.event = new CustomEvent("selectItem");;
        arguments.callee.event.data = event_data; 

        document.dispatchEvent(arguments.callee.event);
    }

    document.addEventListener("selectItem", function(event) {
        console.log(event.data);
    });

小提琴

或者您需要每次初始化自定义事件来设置详细信息属性，如下所示：

arguments.callee.event.initCustomEvent("selectItem", true, true, event_data);

details每次调度事件时，属性都会有新的更新值。

演示