How dose the click event get registered when you are not clicking the checkbox or using javascript?

So I'm working on a custom checkbox and I'm using an example from W3Schools.
What I can't figure out is how is the click event registered when we are not clicking the checkbox?
As you can see in the image below, the input field is on the right of the label text.

HTML

<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

CSS

/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}