Can't modify CustomEvent data

Question

I need to fire a custom event each time when clicked on div with different data attached.

Here is a simplified variant of my code (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>

But in the event listener function I receive the same data each time the event is fired. I tried to change the event before dispatchEvent but seems it is read only object.

Is there any other options to send different data each time i click on div?

Answer 1

The reason is that detail property of the event can be any object but they are read only, i.e they can be set only when the event is created.Iit is specifically used to provide details regarding the event, and not for attaching data for each dispatch of the event.

interface CustomEvent { readonly attribute any detail; };

Probably you can just set a custom property data to the event during each dispatch and access that property.

Try:

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

Or you would need to init the custom Event each time to set the details property like this:

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

and details property will have new updated value each time the event is dispacthed.

Demo