The events we can use in jQuery and their explanations are as follows: (You can examine their usage in the examples section.)

click – Click event.

dblclick - It is a double click event.

mouseenter - It is the event of hovering with the mouse.

mouseleave - It is the event of removing the mouse.

mousedown - The event of pressing the mouse button.

mouseup - It is the event of releasing the pressed mouse button.

It can be thought of as a combination of hover - mouseenter and mouseleave events. Two separate functions can be connected to the hover event. In the first, things to do when the mouse hovers over it, and in the second, things to do when the mouse leaves are specified.

focus - Focusing, that is, activating a form element by clicking on it.

blur - It is the event of abandoning the active form element. load – The event of loading an object and all its content. It can be used for image files, scripts, frame, iframe, and window objects. It enables a function to run when that object is loaded on the client computer.

unload – The event of abandoning a web page. The Unload event can be triggered in the following ways:

Clicking on another link on the page

Giving the git command/pressing enter by typing another address

Clicking the browser's back and forth buttons

Closing the browser window

Refreshing the page

The thing to know about the Unload event is that it may not work in all browsers. So if we are going to use this event, we should test it in all browsers.

resize – Changing the size of the browser window. It is used for the Window object and allows a function to run when the window is resized.

scroll – It is the scrolling of scroll bars. It can be used for Window objects, as well as for HTML objects whose overflow property is set to scroll or auto.

On() Method The on() method can be used when creating functions for different events related to an object. In the example below, assignments are made to the mouseenter, mouseleave and click events of the elements with the .object class applied.

$(".object").on({
 mouseenter: function(){
 $(this).css("background-color", "lightgray");
 },
 mouseleave: function(){
 $(this).css("background-color", "lightblue");
 },
 click: function(){
 $(this).css("background-color", "yellow");
 }
});

Examples

$(document).ready(function(){
 $("#b1").click(function(){
 $( ".text1" ).append( "* " );
 });

$("#b2").dblclick(function(){
 $( ".text2" ).append( "* " );
 });

$("#b3").mouseenter(function(){
 $( ".text3" ).append( "* " );
 });

$("#b4").mouseleave(function(){
 $( ".text4" ).append( "* " );
 });

$("#b5").mousedown(function(){
 $( ".text5" ).append( "* " );
 });

$("#b6").mouseup(function(){
 $( ".text6" ).append( "* " );
 });

$("#b7").hover(function(){
 $( ".text7" ).append( "A " );
},
function(){
 $( ".text7" ).append( "B " );
});

$("#box1").focus(function(){
 $("#box1").css("background-color", "#cccccc");
 });

$("#box1").blur(function(){
 $("#box1").css("background-color", "#ffffff");
 });

$( window ).resize(function() {
 $( ".metin8" ).append( $( window ).width() + " - " );
});

});