Event Examples

Some examples of Events are...

Note...if you head to w3schools.com you will see some examples where you can test out the below commands.

This uses a <table> to create this
Event	Meaning
Mouse Events
.click()	Adds the onClick method
.dblclick()	Adds the ondblclick method to your element(s)
.hover()	The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods. The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element
.mouseenter()	Adds the onmouseenter method to your element(s)
.mouseleave()	Adds the onmouseleave method;
Keyboard Events
.keypress()	Adds the onkeypress event - fires when you press a key
.keydown()	Adds the onkeydown event - fires when you hold down a key
.keyup()	Adds the onkeyup event - fires when you release a key
Form Events
.blur()	Adds the onblur method which fires when your element loses focus
.focus()	Adds the onfocus method which fires when your element gets focus
.change()	The change event occurs when the value of an element has been changed (only works on <input>, <textarea> and <select> elements). Note: For select menus, the change event occurs when an option is selected. For text fields or text areas, the change event occurs when the field loses focus, after the content has been changed.
.on()	The on() method attaches one or more event handlers for the selected elements

Drag an event here ...
(Eg drag .click() or .dblclick()...etc)

.click() example

You can use jQuery to add a 'click event' to your element (assume it has an id="clickElement")
then add the .click and the function you want to run when it was clicked on...eg...

$("#clickElement").click(function() {
   myClickFunc("clickMess",
   "you clicked on the 'click me' button",
   "");
});

Note...
As I need it to run my own function (because I want to pass it parameters) I have to add my function (myClickFunc) inside the 'anonymous function' that this uses

I will just have it display a message saying you clicked on the 'click me' button below
and clear the message if you click on it again.
the button has the id="clickElement" so I can use jQuery to add the click event to it

.dblclick() example

You can use jQuery to add a 'double click event' to your element (assume it has an id="dblclickElement")
then add the .click and the function you want to run when it was clicked on...eg...

$("#dblclickElement").click(function() {
   myClickFunc("dblclickMess",
   "you clicked on the 'click me' button",
   "");
});

Note...
As I need it to run my own function (because I want to pass it parameters) I have to add my function (myClickFunc) inside the 'anonymous function' that this uses

I will just have it display a message saying you clicked on the 'Double Click me' button below
and clear the message if you click on it again.
the button has the id="dblclickElement" so I can use jQuery to add the click event to it

.hover() example

You can use jQuery to add a 'onHover event' to your element (assume it has an id="hoverElement")
then add the .hover and the function you want to run when it was hovered on...eg...

$("#hoverElement").click(function() {
   myClickFunc("hoverMess",
   "you hovered on the 'Hover Over' button",
   "");
});

Note...
As I need it to run my own function (because I want to pass it parameters) I have to add my function (myClickFunc) inside the 'anonymous function' that this uses

I will just have it display a message saying you hovered over the' Hover Over' button below
and clear the message if you hover on it again.
the button has the id="hoverElement" so I can use jQuery to add the hover event to it

.mouseenter() & .mouseleave() example

NOTE...
There are also events for:-
mousedown() (mouse left button down)
mouseup() (mouse left button up)
mousemove()
mouseout()
mouseover()

You can use jQuery to add a mouseenter or mouseleave event' to your element (assume it has an id="mouseElement")
then add the event(s) and the function you want to run when it was moused over...eg...

$("#mouseElement").click(function() {
   myClickFunc("mouseMess",
   "you moved your mouse to the 'Move Mouse On' button",
   "");
});

Note...
As I need it to run my own function (because I want to pass it parameters) I have to add my function (myClickFunc) inside the 'anonymous function' that this uses

I will just have it display a message saying you moved the mouse over the'Mouse Move' button (.mouseenter) below
and clear the message when you mouse off it again (mouseleave).
the button has the id="mouseElement" so I can use jQuery to add the mouse events to it

.keydown(), .keypress() & .keyup() example

You can use jQuery to add a keydown, keypress or keyup event' to your element (assume it has an id="keyElement")
then add the event(s) and the function you want to run when a key was pressed...eg...

The order these events happen is:-
1. keydown
2. keypress
3. keyup

Note:
The onkeypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers.
To detect only whether the user has pressed a key, use the onkeydown event instead, because it works for all keys.

$("#keyElement").keydown(function() {
   myClickFunc("keyMess",
   "you pressed a key",
   "");
});

Note...
As I need it to run my own function (because I want to pass it parameters) I have to add my function (myClickFunc) inside the 'anonymous function' that this uses

I will just have it display a message saying it detected a keydown/keypress (using keydown/keypress)
and then saying it detected a keyup when finished.
the input box has the id="keyElement" so I can use jQuery to add the key events to it

NOTE...
Click in the text box then press a key on the keyboard
...the keydown message will not be displayed as it will instantly be overridden by the keypress message.
So you will probably only use the keydown & keyup events OR the keypress event.

.blur() & .focus() example

You can use jQuery to add a blur() & focus() event' to your element (assume it has an id="focusElement")
then add the event(s) and the function you want to run when an element gets focus (focus) or loses focus (blur)...eg...

$("#focusElement").focus(function() {
   myClickFunc("focusMess",
   "your element lost focus",
   "");
});

Note...
As I need it to run my own function (because I want to pass it parameters) I have to add my function (myClickFunc) inside the 'anonymous function' that this uses

I will just have it display a message saying it received focus when an element gains focus (uses .focus())
and then saying it lost focus (uses .blur()) when the element loses focus.
the input box has the id="focusElement" so I can use jQuery to add the focus events to it

NOTE...
Click in the text box to give it focus & TAB out or click in the demo box to force it to lose focus

Note... To force an element to get focus use .focus() with no function inside ( )'s
eg... $("#myElementID").focus(); - then the element with the id="myElementID" will get focus.

.change() example

You can use jQuery to add a 'onchange event' to your element (assume it has an id="changeElement")
then add the .change and the function you want to run when it was changed...eg...

$("#changeElement").click(function() {
   myClickFunc("changeMess",
   "you changed the value of the drop down box",
   "");
});

Note...
As I need it to run my own function (because I want to pass it parameters) I have to add my function (myClickFunc) inside the 'anonymous function' that this uses

I will just have it display a message saying you changed the drop down value
and clear the message when it loses focus.
the drop down box (select box) has the id="changeElement" so I can use jQuery to add the change event to it

.on() example

You can use jQuery to add a multiple events to your element (assume it has an id="onElement")
then add the event(s) and the function you want to run.
For this example I am using .mouseenter() & .mouseleave() events...eg...

$("#onElement").on({
   mouseenter: function() {myClickFunc("onMess",
      "you moved your mouse to the 'Move Mouse On' button",
      "");
   },
   mouseleave: function() {myClickFunc("onMess",
      "you moved your mouse off of the 'Move Mouse On' button",
      "");
   }
});

Note...
As I need it to run my own function (because I want to pass it parameters) I have to add my function (myClickFunc) inside the 'anonymous function' that this uses

I will just have it display a message saying you moved the mouse over the'Mouse Move' button (.mouseenter) below
and clear the message when you mouse off it again (mouseleave).
the button has the id="onElement" so I can use jQuery to add the mouse events to it

jQuery Event(s) Examples