Free Web Development Online Tutorials, Learn to Code
Learn Jquery Events, jquery events attached to element, jQuery DOM event list

jQuery events examples

In this tutorial you will learn jquery events how jquery events get attached to html element.

jquery events attached to element

What are Events?
Any type of action that visitor performs on web page using mouse or keyboard is called events

As a web designer or developer you are probably familiar with different type of events like mouse events, keyboard events, browser events, DOM element events; and you often need to perform many task using different events in web development life cycle

Commonly used events are: load, click , scroll, unload, resize, mouseover, mouseout, mousemove, mouseenter, keydown, keypress, keyup, select, submit, change, error etc.

How to write Events in JQuery

Here are some example of how you can capture jquery browser events , you can see how jquery events get attached to element or jquery get events bound to element

  • $(document).ready() example

    $(document).ready(function () {
        
    });
    
  • Click() method can be attached to any html element , so when click happen on that particular element then this click method gets executed

    For example here we have captured the button click event, and we can write any code to be executed there.

    $(document).ready(function () {
        $("#btnHide").click(function () {
            $(this).hide();
        });
    });
    
  • In hover() method actually two events happen, once pointer enter and when it leave, So we can write code for both events mouseenter() and mouseleave() methods.

    $(document).ready(function () {
        $("#btnHover").hover(function () {
                  $("#btnHover").val("hovering this button");
        });
        $("#btnHover").mouseleave(function () {
                        $("#btnHover").val("Bye! Come Again");
                    });
    });
    

Like above examples you can attach all following events to any html element using jQuery.

jQuery DOM events

You can handle all type DOM events using jQuery library

  • Keyboard events
    • keypress - onkeypress
    • keydown - onkeydown
    • keyup - onkeyup
  • Mouse events
    • click - onclick
    • hover
    • mouseenter - onmouseenter
    • mousedown - onmousedown
    • mousemove - onmousemove
    • mouseover - onmouseover
    • mouseout - onmouseout
    • mouseup - onmouseup
  • Document
    • Load - onload
    • Ready
    • Unload - onunload
    • Error - onerror

In web development most of the time you may find these DOM manipulation methods very useful: click (), change (), submit (), mouseenter(), mouseleave(), hover(),keyup(), keydown() etc. You also can check full list of events

 
JQuery Events Example


Jquery Events Tutorial
jQuery Examples | JavaScript Online Course