change event firing on radios not attached to body

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    See devtools console for logs.<br>

    <script src="script.js"></script>
  </body>

</html>

// Code goes here

function createRadioAndListen() {
  var radio = document.createElement('input');
  
  radio.type = 'radio';
  
  console.log('create radio, attach event listener');
  
  radio.addEventListener('change', function(e) {
    console.log('triggered', e.type);
  });  
  
  return radio;
}

console.log('------------');

var radio = createRadioAndListen();

var syntEvent = new MouseEvent('click');

console.log('not attached to body');

console.log('dispatch event');
radio.dispatchEvent(syntEvent);

console.log('---------')

var radio2 = createRadioAndListen();

document.body.appendChild(radio2);

console.log('attached to body');

var syntEvent2 = new MouseEvent('click');

console.log('dispatch event');
radio2.dispatchEvent(syntEvent2);

/* Styles go here */