Why does document.getElementById("...").value not work on this login page

Question

I raised a question here about how to login to a website (https://www.intellizoom.com/login), where, after inputting the username and password via javascript (tampermonkey), the login button doesn't get enabled. markfila provided the following solution (including my own code):

setTimeout(function(){
    document.getElementById("email").value = "username@Domain.co.uk";
    document.getElementById("password").value = "password";

    // solution provided my markfila:
    // event needed to enable login button
    let event = new Event("blur");
    document.getElementById("email").dispatchEvent(event);
    document.getElementById("password").dispatchEvent(event);

    // login button now enabled, so use click() to submit
    document.getElementsByClassName("button large primary is-rounded")[0].click();
},100);

As a newbie, I'm trying to fully understand what's going on, so I can figure out solutions like this on my own. This is how markfila described it:

... there using some kind of third party library for the ui and its not triggering the event that sets the value attribute. After a bit of messing around it looks like the ui library is setting the value on the blur event.

Reading up about the blur event, if I understand correctly, when an input field is interacted with there is normally a focus event (on entry to the field) and a blur event (on exit from the field). These events can be used to trigger code, including making the login button active.

In an attempt to fully understand this, I've come up with this alternative (albeit less elegant) code that also works successfully:

setTimeout(function(){
    document.getElementById("password").focus();
    document.getElementById("password").value = "password";
    document.getElementById("email").focus();
    document.getElementById("email").value = "username@Domain.co.uk";
    document.getElementById("password").focus();
    document.getElementsByClassName("button large primary is-rounded")[0].click();
},100);

From my testing of the above code, what seems to be happening is that:

• the value attribute for each of the two input fields seems to be set only when either (1) the field is focused before calling .value = "..." (as per my revised code) or (2) the blur event is dispatched (as per markfila's code).
• the 'Log in' button is only enabled when both the value attribute has been successfully set for both fields, and the blur event is then triggered either by (3) switching focus to a different field (as per my revised code), or (4) dispatching the blur event (as per markfila's code).

How is it that document.getElementById("...").value doesn't actually set .value successfully unless I first focus the field or trigger the blur event?

This was proposed as an answer to this question. Perhaps it's because I'm a newbie, or I've missed something, but whilst it make an interesting read (mostly because it links to this), I really don't understand how it answers my question. AFAIK the issue isn't that the .getAttribute('value') is different from .value. I know how to make it work (trigger the blur event either directly or by shifting focus to another field - see also here), but I don't understand why setting .value isn't enough.

Also, I've found that manually inputting the username and password activates the 'Log in' button as soon as a valid value is input in for both fields - without exiting the 2nd field, despite (presumably) no blur event being triggered! How can that be?