What is an event ?


The response of the page to different visitors is called an event.

An event handler refers to the method that is called when certain events occur in the HTML.

Example:

Move the mouse over the element.

Select radio button

Click element

The term "trigger" (or "excitation") is often used in events such as: "The keypress event is triggered when you press a button."

Common DOM events:


EventDescription
ClickThis event is fired when the mouse clicks
KeypressTriggered when the key on the keyboard is pressed again
SubmitTriggered when the form is submitted
LoadPage loaded trigger
DblclickDouble click on the mouse is triggered
KeydownTriggered when a key on the keyboard is pressed
ChangeTriggered when the current element loses focus and the content of the element changes
ResizeTriggered when the browser window size is changed
MouseenterAdd/trigger mouseenter event
KeyupTriggered when the key on the keyboard is pressed and released
FocusTriggered when an element loses focus
ScrollAdd/trigger scroll event
MouseleaveAdd/trigger mouseleave event
BlurAdd/trigger blur event


jQuery event method syntax


In jQuery, most DOM events have an equivalent jQuery method.


Specify a click event in the page:


$("p").click();


The next step is to define what time to trigger the event. You can do this with an event function:


$("p").click(function(){ 
  // Code executed after the action is fired!! 
});


Commonly used jQuery event methods


$(document).ready()


The $(document).ready() method allows us to execute the function after the document has been completely loaded. This event method has already been mentioned in the jQuery syntax section.


Click()

The click() method is called when a button click event is fired.

This function is executed when the user clicks on an HTML element.

In the following example, when the click event fires on a <p> element, the current <p> element is hidden:

Run the program and try it out


Dblclick()


The dblclick event occurs when you double-click an element.

The dblclick() method fires a dblclick event, or a function that runs when a dblclick event occurs:


 

Run the program and try it out


Mouseenter()


The mouseenter event occurs when the mouse pointer passes through the element.


The mouseenter() method fires a mouseenter event or specifies a function that runs when a mouseenter event occurs:



Run the program and try it out


Mousedown()


The mousedown event occurs when the mouse pointer moves over the element and the mouse button is pressed.


The mousedown() method fires a mousedown event or specifies a function that runs when a mousedown event occurs:



Run the program and try it out


Hover()


The hover() method is used to simulate a cursor hover event.


When the mouse is moved over the element, the first function specified (mouseenter) is fired; when the mouse is moved out of the element, the specified second function (mouseleave) is triggered.


Run the program and try it out


Focus()


The focus event occurs when the element gets focus.


When you click on a selected element with a mouse click or navigate to an element with the tab key, that element gets the focus.


The focus() method fires a focus event or specifies a function that runs when a focus event occurs:


Run the program and try it out


Interested to try other events



Last Updated: 2018-11-24 14:47:00 By Akshay

SHARE THIS

share_facebook share_twitter share_google_plus

Please Comment Here :