Thursday, 22 October 2015

jQuery Event

Loading Event 

load() - occur event after loading the source related to selected image or frame elements

ready() - occur event after completing loading of the HTML document object

--------------------------------------------------------------------------------------------------------------------

Mouse Event

click() - occur event once the selected element is clicked

dblclick() - occur event once the selected element is clicked with double time

mouseout() - occur event once the mouse pointer is out of the area in the selected element

mouseover() - occur event once the mouse pointer is on the area of the selected element

hover() - occur event once the mouse pointer is on and out of the area in the selected element

mousedown() - occur event once the mouse is clicked on the area of the selected element

mouseup() - occur event once the mouse button is detached from pushing on the area of selected element

mouseenter() - occur event once mouse pointer is on the area of the selected element

mouseleave() - occur event once mouse pointer is out of the area in the selected element

mousemove() - occur event once mouse pointer is moved in the area of the selected element

--------------------------------------------------------------------------------------------------------------------

Focus Event

focus() - occur event when focus is created in selected element or making it create focus forcefully

focusin() - occur event when focus is created in selected element

focusout() - occur event when focus is moved to other element

blur() - occur event when focus is moved to other element or remove focus in the selected element forcefully

--------------------------------------------------------------------------------------------------------------------

Keyboard Event

keypress() - occur event when key is pushed on the selected element and return key code except letter key

keydown() - occur event when key is pushed on the selected element and return all the key code

keyup() - occur event when the finger is detached from keyboard

--------------------------------------------------------------------------------------------------------------------

Etc Event

scroll() - occur event when moving the scroll

change() - occur event when the value of the element in selected element is changed

error() - occur event when error happens in selected element

--------------------------------------------------------------------------------------------------------------------

Group Event 

- It enables to create events more than two at once

on()
- supported from jQuery 1.7 version, it is applied created new element dynamically.

for example,

$("h1 a").on({
      
        "mouseover focus":function(){
               $(this).css("color","red");
         },
        "mouseout blur":function(){
                $(this).css("color","yellow");
         }

});


$("h2 a").on("mouseover focus", function(){
     $(this).css("background-color", "yellow");
});


$(document).on("mouseout blur", "h2 a", function(){
     $(this).css("background-color","aqua");
});


bind()
- similar with on() but not applied to new element created dynamically

for example,

$("h1 a").bind("mouseover focus", function(){
     $(this).css("background","yellow");
});

--------------------------------------------------------------------------------------------------------------------

Event Removing Method

off() 

$(element).off(); // Remove all the event registered in the element
$(element).off("event name");  // Remove only appointed event in the element

For example)
$("h1 a").off(); //All the event will be gone in the element of a














No comments:

Post a Comment