javascriptdom-events

Passing Event from Button: event.target undefined; json strigify gives {"isTrusted":true}?


I am attempting to pass an event from button onclick to a function in my js file. I am testing using live preview in Brackets.

On the HTML File I have a button like the following;

<button class="btn btn-link" type="button" onclick="return submit_ul_form(event);">
    Upload
</button>

In my JS File I have the following;

function submit_ul_form(e)
{
    alert(JSON.stringify(e)); // Gives: {"isTrusted"true}
    var target = e.target;
    alert (JSON.stringify(target)); // Gives: undefined
    ....
}

I am unsure why this occurs - It's my understanding that I should be able to retrieve the node from event.target

I have also tried onclick="submit_ul_form(this)"

This gives {} for the first alert, and undefined for the second.

What could cause this behaviour?


Solution

  • As said in my comment (done some try since I commented so now I'm sure of it)

    JSON.stringify has some rule and the one applied here is this one : All the other Object instances (including Map, Set, WeakMap, and WeakSet) will have only their enumerable properties serialized.

    look at the doc for more details

    And finally a little script listing all enumerable properties for the event and the target

    function submit_ul_form(e)
    {
        console.log("enumerable in event : ")
        let a = 0
        for(let i in e) {
          if(e.propertyIsEnumerable(i)) {
            console.log(`${i} = ${e[i]}`)
            a++;
          }
        }
        console.log("Total: " + a)
        console.log("JSON.stringify(e) = " + JSON.stringify(e))
        
        console.log(" ")
        
        var target = e.target;
        
        console.log("enumerable in target : ")
        a = 0
        for(let i in target) {
          if(target.propertyIsEnumerable(i)) {
            console.log(`${i} = ${target[i]}`)
            a++;
          }
        }
        console.log("Total: " + a)
        console.log("JSON.stringify(target) = " + JSON.stringify(target))
    }
    <button onclick="return submit_ul_form(event);">
        Upload
    </button>