JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox">
<pre>Output:</pre>

JavaScript

var input=document.getElementsByTagName('input')[0];
var pre=document.getElementsByTagName('pre')[0]; 
input.addEventListener('DOMAttrModified', function(e){
  pre.appendChild(document.createTextNode(e.type+' '+e.attrName+' '+e.prevValue+' changed to '+e.newValue+'\n'))
}, false);

input.addEventListener('change', function(e){
  pre.appendChild(document.createTextNode(e.type+' '+e.target.checked+'\n'))
}, false); 

input.checked=true; // does not trigger 'change'
input.checked=false; // ditto
input.setAttribute('checked', 'checked'); // triggers DOMAttrModified
input.disabled=true;
input.disabled=false;