Does HTML Hidden control have any events? Like onchange or something?

Events are only triggered when the user performs the event in the browser, so if it's <input type="hidden"> or an <input> hidden by CSS, the user won't be able to trigger events to your input.

The only way you would get onchange to work is if you manually trigger onchange in Javascript. A quick example of this:

<form name="f" onsubmit="document.f.h.value='1'; 
                         document.f.h.onchange(); 
                         return false;"
>
    <input type="hidden" name="h" value="0" onchange="alert(document.f.h.value);" />
    <input type="submit" />
</form>

Yes, certain browsers (such as Firefox) will fire an onclick or onfocus event on hidden elements when they're activated via an accesskey attribute (meant to provide a keyboard hotkey to jump to an input).

Open the below in firefox, focus the frame, then strike Alt+Shift+x (Windows and Linux) or Ctrl+Alt+x (Mac).

<input type="hidden" accesskey="x" onclick="alert('clicked!');" />

JavaScript has focus events for the elements. There are three focus events: focus, focusin, and focusout.

I discovered focusout will trigger when an element display state is change for both block and none, while focusin only triggered for display state of block.

document.getElementById('element_id').addEventListener('focusout',function(e){
    if (this.style.display === "none") {
       // perform operations when the element is hidden, like clear fields, etc.
    } else {
       // perform operations when the element is displayed, like populate fields
    }
});

Facing the problem I needed to react on change of hidden inputs which were modified by code which was out of my control, I got inspired by JS onchange hack for input[type=hidden] and created following solution for my problem using MutationObserver

Request: I want to have function FAM.processFields run whenever any of selected subset of form fields (expressionFields) changes its value.

Problem: Some of the form fields are of type="hidden", so change event is never fired for them.

Solution:

var index, elementId, element;
var elementIdPrefix = g_form.getTableName() + ".";
var expressionFields = this.getExpressionFieldNames();

// As trigger either Event or MutationRecord is passed, depends on input type
var processFieldsCallback = (function(trigger) {
  // Relies on instance of - FAM object - added in onLoad script
  FAM.processFields();
});

var changeOfValueConfig = {attributeFilter: ["value"]};

var processFieldsObserver = new MutationObserver(processFieldsCallback);

if (this.debug) {
  console.log("addChangeEventListeners to expressionFields");
  console.log(expressionFields);
}

for (index = 0; index < expressionFields.length; index++) {
  elementId = elementIdPrefix + expressionFields[index];
  element = document.getElementById(elementId);
  // In case of hidden input (e.g. glideList, fieldList, checkbox) we need to register an observer to it
  if (element.getAttribute("type") && element.getAttribute("type").toLowerCase() == "hidden") {
    processFieldsObserver.observe(element, changeOfValueConfig);
    if (this.debug) {
      console.log("register processFieldsObserver of changeOfValueConfig on elementId " + elementId);
      console.log(element);
    }
  }
  else {
    element.addEventListener("change", processFields);
    if (this.debug) {
      console.log("addChangeEventListeners on elementId " + elementId);
      console.log(element);
    }
  }
}   

Facing the problem I needed to react on change of hidden inputs which were modified by code which was out of my control, I got inspired by JS onchange hack for input[type=hidden] and created following solution for my problem using MutationObserver

Request: I want to have function FAM.processFields run whenever any of selected subset of form fields (expressionFields) changes its value.

Problem: Some of the form fields are of type="hidden", so change event is never fired for them.

Solution:

var index, elementId, element;
var elementIdPrefix = g_form.getTableName() + ".";
var expressionFields = this.getExpressionFieldNames();

// As trigger either Event or MutationRecord is passed, depends on input type
var processFieldsCallback = (function(trigger) {
  // Relies on instance of - FAM object - added in onLoad script
  FAM.processFields();
});

var changeOfValueConfig = {attributeFilter: ["value"]};

var processFieldsObserver = new MutationObserver(processFieldsCallback);

if (this.debug) {
  console.log("addChangeEventListeners to expressionFields");
  console.log(expressionFields);
}

for (index = 0; index < expressionFields.length; index++) {
  elementId = elementIdPrefix + expressionFields[index];
  element = document.getElementById(elementId);
  // In case of hidden input (e.g. glideList, fieldList, checkbox) we need to register an observer to it
  if (element.getAttribute("type") && element.getAttribute("type").toLowerCase() == "hidden") {
    processFieldsObserver.observe(element, changeOfValueConfig);
    if (this.debug) {
      console.log("register processFieldsObserver of changeOfValueConfig on elementId " + elementId);
      console.log(element);
    }
  }
  else {
    element.addEventListener("change", processFields);
    if (this.debug) {
      console.log("addChangeEventListeners on elementId " + elementId);
      console.log(element);
    }
  }
}