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可以是任何对象，但它们是只读的，即只有在创建事件时才能设置它们。任何它都专门用于提供有关事件的详细信息，而不是为每次发送事件附加数据。

interface CustomEvent { readonly属性任何细节; };

您可以在每次调度期间为事件设置自定义属性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

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

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

每次发布事件时，

和details属性都会有新的更新值。

<强> Demo

无法修改CustomEvent数据

1 个答案: