<div id="elements">
  <div id="checkbox_container">
    <input id="checkbox1" class="checkbox_input" type="checkbox" />
    <label id="checkbox1_label" class="checkbox_label" for="checkbox1">checkbox</label>
    <br />
    <label id="checkbox2" class="checkbox_label">
      <input class="checkbox_input" type="checkbox" /> 
      checkbox
    </label>
  </div>
  <div id="checkbox_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;
}

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

#checkbox1[disabled] + #checkbox1_label {
  opacity: 0.5;
  pointer-events: none;
}

#checkbox2.disabled {
  opacity: 0.5;
  pointer-events: none;
}

const checkbox_container = document.querySelector('#checkbox_container');
const checkbox_msg = document.querySelector('#checkbox_msg');

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

checkbox_container.addEventListener('pointerup', chk_handler);
checkbox_container.addEventListener('keyup', chk_handler);