javascript event not triggered if the change origin is not from the html?

问题

I am trying to understand why the change event in the following example is not triggered (I'll show exactly where).

I have a checkbox, lets call it 'mainCheckbox', when checked - I want to check some other related checkboxes (so far working).

In addition when I uncheck one of the related checkboxes (child checkboxes) - I want to uncheck the mainChecbox, this also works - but here is something I am failing to understand:

I am changing the checked property of the mainCheckbox (in the onchange handler of the 'childCheckbox'),

how come the onchange handler of mainCheckbox is not invoked?
Or how come the onchange event of the main checkbox is not triggered?

here is the code:

//binding to the 'mainCheckbox' change event:
$("[data-role='group']").bind("change", function(event){
    //checking / unchecking all related checkboxes respectivly
    $("li input[data-group='" + event.target.id + "'").prop('checked', $(this).prop("checked"));
})

//binding to the change event of every 'child checkbox'
$("li input[data-group]").bind("change", function(){
    if (event.target.checked){
        //if the child checkbox is now checked - I am checking if now all child checkboxes are checked,
        //if so - I need to check the main checkbox.
        if ($("[data-group=" + event.target.dataset.group + "]:checked").length == $("[data-group=" + event.target.dataset.group + "]").length){
            $("#" + event.target.dataset.group).prop("checked", true);
        }
        //TODO: add this device to the selectedDevices array.
    }
    else {
        //the checkbox is now unchecked - so I am unchecking the main checkbox -
        //but here is my failing to understand part: I am unchecking the main checkbox - 
        //why the change event is not triggered? I thought that now all child checkboxes will be unchecked as well
        //(I am happy they are not :) just failing to understand why)...
        $("#" + event.target.dataset.group).prop("checked", false);
        //TODO: remove this device from the selectedDevices array.

    }

})

Thanks in advance to all responders,
Jimmy

回答1:

In general, the events are only fired in response to user actions, not actions in code. Setting the checked property on a checkbox does not fire its change event; the user changing the checkbox's checked state does.

This is also true for when you use code to set the value of an input, the selectedIndex (or value) of a select, etc.

It's also true in relation to the submit events on form elements: Calling an HTMLFormElement's submit function will submit the form without triggering its submit event. But, if you use jQuery to submit the form (e.g., if you call submit on a jQuery object wrapped around an HTMLFormElement), it does trigger its submit event handlers. This is an unfortunate by-product of jQuery's API design.

If you want to trigger an event, you can do that with jQuery's trigger function. So if it's appropriate, after setting checked, you could .trigger("change"). In general I advocate not generating synthetic predefined events like that (instead, just call whatever function you need to call, or use a synthetic custom event), but there are valid use cases.

回答2:

Onchange event is fired when the element loses focus. Since you are changing the value programmatically, the element you are changing never loses focus. You may wish to check the oninput event.

来源：https://stackoverflow.com/questions/38671499/javascript-event-not-triggered-if-the-change-origin-is-not-from-the-html