jQuey Events

Next ❯Hide & Show

It's like a trigger condition, if happens then what you want to do ! (Action)

  • turned_in_notTypes of Events
    • Mouse Events : Event occurs due to mouse
    • Keyboard Events : Event occurs due to keyboard
    • Form Events : Event occurs due to form input element
    • Window Events : Event occurs due to web window
  • Every Events have some methods
  • Remember! You must attach the event you want to trigger on an element

/*Syntax define action for an event if triggers*/

$("selector").eventMethod(function(){

  //Your action goes here....!

});

Example:

Using some mouse events below


I am a paragraph element !

I am a paragraph element !

*Click above paragraph to change its color*

$("p").click(function(){
  $(this).css("color","red");
});
click( )subject
  • trending_downExample Explained
    • Event Method : click()
    • Event Selector : "p" Element
    • Action Method : css()
    • Action Selector : this

    • Event Selector has been triggered when clicked
    • On Action Selector, specific action will be performed
    • Well, here because of this Selector, it selects current Event Selector("p") which has been clicked

I am a paragraph element !

*Double click on button to change paragraph color*

$("button").dblclick(function(){
  $("p").css("color","red");
});
dblclick( )subject
  • trending_downExample Explained
    • Event Method : dbclick()
    • Event Selector : "button" Element
    • Action Method : css()
    • Action Selector : "p" Element

    • Event Selector has been triggered when double clicked
    • On Action Selector, specific action will be performed
    • Well, here on double click of Event Selector, Action Selector color changes
  • More Event methods have been described later in coming section

  • Hide & Show
❮ Prev jQuey Selectors
Next ❯Hide & Show
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯