Blur Event in jQuery

$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "hotpink");
    });
    $("input").blur(function(){
        $(this).css("background-color", "lightgray");
    });
});

Try it

Click Event in JQuery

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});

Try it

Double Click Event in JQuery

$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).hide();
    });

Try it

Focus Event in jQuery

$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "lightblue");
    });
    $("input").blur(function(){
        $(this).css("background-color", "lightgray");
    });
});

Try it

Hover Event in JQuery

$(document).ready(function(){
    $("#T").hover(function(){
        alert("You entered the paragraph");
    },
    function(){
        alert("Bye! You now leave the paragraph");
    }); 
});

Try it

Mouse Enter Event in JQuery

$(document).ready(function(){
    $("#T").mouseenter(function(){
        alert("You Enter the paragraph");
    });
});

Try it

Mouse Leave Event in JQuery

$(document).ready(function(){
    $("#T").mouseleave(function(){
        alert("Good Bye ! You now leave the paragraph");
    });
});

Try it

on Method Event in JQuery

$(document).ready(function(){
    $("p").on({
        mouseenter: function(){
            $(this).css("background-color", "yellow");
        },  
        mouseleave: function(){
            $(this).css("background-color", "red");
        }, 
        click: function(){
            $(this).css("background-color", "lightgray");
        }  
    });
});

Try it

Video Lecture