Event type property in jQuery

event.type. Name of the event that has occurred

In the following example, the color of a button will be changed according to the type of event that happens on it.

click(). When I do single mouse click inside an element.
mouseover(). When the mouse enters an element. Refers to the element and its children.
mouseout(). When the mouse leaves an element. Refers to the element and its children.

<button id="show">CHANGE COLOR</button>
<!--Script jQuery-->
<script>
    $("#show").on('click mouseover mouseout', function (event) {
      if(event.type == 'click'){
        $(this).css('background-color', 'red');
      }
      if(event.type == 'mouseover'){
        $(this).css('background-color', 'blue');
      }
      if(event.type == 'mouseout'){
        $(this).css('background-color', 'orange');
      }
    });
</script>
<!--JQuery Library-->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>