addEventListener does not work

When I use addEventListener to call a function on change event, it does not work. However, if I use jQuery's .on('change', ...) it does work. Why is that?

This is my code:

<html>
<head>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Bootstrap 3 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap-Toggle -->
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<input data-toggle="toggle" type="checkbox" id="mytoggle">
<script>
document.querySelector('#mytoggle').addEventListener('change', () => alert('hello'));
/* this one works
$('#mytoggle').on('change', () => alert('hello'));
*/
</script>
</body>
</html>

minhur / bootstrap-toggle

addEventListener does not work #199