javascript - 无法修改 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

原因是detail property事件的对象可以是任何对象，但它们是只读的，即它们只能在创建事件时设置。它专门用于提供有关事件的详细信息，而不是为事件的每次分派(dispatch)附加数据。

interface CustomEvent { readonly attribute any detail; };

也许您可以在每次分派(dispatch)期间为事件设置自定义属性 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);
    });

Fiddle

或者您需要每次都初始化自定义事件来设置 details 属性，如下所示:

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

和 details 属性在每次事件被分发时都会有新的更新值。

Demo