<div id="elements">
  <div id="radio1_container">
    <input id="radio1a" class="radio_input" type="radio" name="radio1" />
    <label class="radio_label" for="radio1a">radio 1a</label>
    <input id="radio1b" class="radio_input" type="radio" name="radio1" />
    <label class="radio_label" for="radio1b">radio 1b</label>
  </div>
  <div id="radio2_container">
    <label class="radio_label">
      <input class="radio_input" type="radio" name="radio2" /> 
      <span>radio 2a</span>
    </label>
    <label class="radio_label">
      <input class="radio_input" type="radio" name="radio2" /> 
      <span>radio 2b</span>
    </label>
  </div>
  <div id="radio_msg">waiting...</div>
</div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap');

html,
body {
  display: grid;
  height: 100vh;
  place-items: center;
}

#elements {
  display: flex;
  flex-direction: column;
  width: 200px;
}
#elements > div {
  margin: 10px 0;
}

#radio_msg,
.radio_label {
  color: rebeccapurple;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

const radio1_container = document.querySelector('#radio1_container');
const radio2_container = document.querySelector('#radio2_container');
const radio_msg = document.querySelector('#radio_msg');

function radio_handler (e) {
  if (e.target.tagName === 'LABEL' || e.target.tagName === 'INPUT') {
    if (e.pointerType) {
      radio_msg.innerText = `Pointer Event: ${e.pointerType}`;
    } else if (e.code === 'Space') {
      radio_msg.innerText = `Keyboard Event: ${e.code}`;
    }
    
    window.setTimeout(() => {
      radio_msg.innerText = 'waiting...';
    }, 2000);
  }
}

radio1_container.addEventListener('pointerup', radio_handler);
radio1_container.addEventListener('keyup', radio_handler);

radio2_container.addEventListener('pointerup', radio_handler);
radio2_container.addEventListener('keyup', radio_handler);