jQuery Events

1. Click() Events:

2) Hover() Event:

Document Loading

1. ready() Event:

$(document).ready(function(){
    $("button").click(function(){
       alert("thanks for clicking");
    });
});

Browser Events

1. resize() Events:

    $(window).resize(function(){
       alert("Your Windows Resizing");
   });

2. Scroll() Events:

$("div").scroll(function(){
    alert("scrolled");
});

Form Events

1. blur() Event:

$("input").blur(function(){
     alert("This input field has lost its focus.");
});

2. change() Event:

$("input").change(function(){
  alert("The text has been changed.");
});

3. focus() Event:

$("input").focus(function(){
  $("span").css("display", "inline").fadeOut(2000);
});
<span>Nice to meet you!</span>

4. select() Event:

$("input").select(function(){
    alert("Text marked!");
});

5. submit() Event:

$("form").submit(function(){
  alert("Submitted");
});

Keyboard Events

1. focusin() Event:

$("input").focusin(function(){
    alert("Your focus in input field");
});

2. focusout() Event:

 $("input").focusout(function(){
    alert("your focus is now not in input field");
});

3. keydown() Event:

$("input").keydown(function(){
    $("input").css("background-color", "yellow");
});

4. keypress() Event:

i = 0;
$(document).ready(function(){
     $("input").keypress(function(){
         $("span").text(i += 1);
     });
});
<!-- // for html-->
Enter your name: <input type="text">

<p>Keypresses: <span>0</span></p>

5 keyup() Event:

$("input").keyup(function(){
    $("input").css("background-color", "pink");
});