每次单击带有不同数据的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时，是否还有其他选项可以发送不同的数据？
最佳答案
原因是事件的detail property可以是任何对象，但它们是只读的，即只能在创建事件时进行设置。它专门用于提供有关事件的详细信息，而不是为每次事件的派发附加数据。
接口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
否则，您每次都需要初始化自定义事件来设置details属性，如下所示：
arguments.callee.event.initCustomEvent("selectItem", true, true, event_data);
每次事件消失时，
details属性将具有新的更新值。Demo