I have a question about example mouse event handling!

Hello NeoDahl, ^ - ^

I'm answering your questions.

The reason why the picture disappears when you click on the monkey is because the hash (#) is set in the href attribute value of the a> element, and Codepen reloads the page every time you click.

<a href="#" class="link is-monkys">
  <img src="monks-frame-normal.jpg" alt="Monkey with folded arms">
</a>

This is the default behavior of the browser, and if you programmatically block the browser's default behavior, you can prevent the monkey picture from disappearing when you click on the monkey.

To block the browser's default behavior, you can block the default behavior by receiving the Event object as a parameter for the event handler (function), and then using the preventDefault() method for the passed Event object.

var monkys = document.querySelector('.link.is-monkys');

// Passing Event Objects as Parameters in Event Handler (Function)  
monkys.onclick = function(event) {

  // Block browser default behavior
  event.preventDefault();

  console.log ("Monkey Click");

};