Event handling in jQuery

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( 'div' ). bind ( 'click' , function ( event ){ alert ( 'Hi there!' ); }); }); 

 Click on any square below to see the result:  class = "div" style = " background - color : blue ; " > ONE 

class="div"style="background-color:green;">TWO class="div"style="background-color:red;">THREE

The above code will cause the div element to respond to the click event; When the user clicks inside this div element, shortly after, the message will be displayed.

The full syntax of the bind () command in jQuery is as follows:

 selector .bind( eventType[, eventData], handler)

Next, we describe the parameters in detail:

eventType - A string containing a JavaScript event type, such as clicking or submitting. You follow below to see the full list of event types.

eventData - optional parameter is a map of the data that will be transmitted to Event Handler.

handler - A function to execute every time an event is triggered.

Remove the Event Handler in jQuery

One feature is that, whenever an Event Handler is established, it is still effective in the rest of the site. There is a need when you want to remove this Event Handler.

jQuery provides the unbind () command to remove an existing Event Handler. The unbind () syntax in jQuery is as follows:

 selector .unbind(eventType, handler) or selector .unbind(eventType)

Details of parameters:

1. eventType - A string containing a JavaScript Event type, such as clicking or submitting. You follow below to see the full list of event types.
2. handler - If provided, it identifies the specific Event Handler to remove.

Types of events in jQuery

You can connect (bind) the following events using jQuery:

No. Event Type & Description 1 blur

Appears when the element loses focus

2 change

Appears when the element changes

3 click

Appears when clicking

4 dblclick

Activate when double click

5 errors

Appears when there is an error during download

6 focus

Appears when the element receives focus

7 keydown

Appears when the key is pressed

8 keypress

Activate when key is pressed and release

9 keyup

Activate when the key is released

10 load

Appears when the document is loaded

11 mousedown

Appears when the mouse button is pressed

12 mouseenter

Appears when the mouse moves into an element area

13 mouseleave

Appears when the mouse moves out of an element area

14 mousemove

Activate when the mouse pointer moves

15 mouseout

Triggers when the mouse pointer moves away from an element

16 mouseover

Activate when the mouse pointer moves over an element

17 mouseup

Appears when a mouse button is released

18 resize

Activate when window size changes

19 scroll

Activate when the window is rolled

20 select

Activate when a text is selected

21 submit

Activate when a form is submitted

22 unload

Activate when document is not loaded

Event object in jQuery

The callback function takes a single parameter; When a Handler is called, the JavaScript Event object is passed through it.

Event objects are often unnecessary and parameters are ignored, when the context is usually available when Handler is connected to know exactly what should be done when Handler is activated; However, there are certain properties that you need to access.

Properties of the Event object in jQuery

The properties of the Event are available and safe to access in an independent manner:

STATUS & Description1 altKey

Set to true if Alt key is pressed when the event is activated, otherwise false. The Alt key is labeled Option on most Mac keyboards

2 ctrlKey

Set to true if Ctrl key is pressed when the event is activated, otherwise false

3 data

The value, if any, is passed as the second parameter to the bind () command when Handler is established.

4 keyCode

Give the event the keys move up and down, this returns the key that was pressed

5 metaKey

Set to true if the Meta key is pressed when the event is activated, otherwise false. The Meta key is the Ctrl key on the PC and Command key on the Macs

6 pageX

For mouse-related events, determine the horizontal coordinates of the event in each relationship with the original page.

7 pageY

For mouse-related events, determine the vertical coordinates of the event in each relationship with the original page

8 relatedTarget

For some mouse-related events, identify the element that the mouse pointer left or entered when the event was triggered.

9 screenX

For some mouse-related events, determine the horizontal coordinates of the event in relation to the original screen

10 screenY

For some mouse-related events, determine the vertical coordinates of the event in relation to the original screen

11 shiftKey

Set to true if the Shift key is pressed when the event is activated, otherwise false

12 target

Identify the element with which the event is triggered

13 timeStamp

timestamp (millisecond value) when the event is created

14 type

For all events, specify the type of event that is triggered

15 which

For keyboard-related events, identify numeric value codes for keys that cause events, and for mouse-related events, determine which buttons are pressed (1 for the left, 2 for the middle). and 3 for the right button)

For example:

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( 'div' ). bind ( 'click' , function ( event ){ alert ( 'Event type is ' + event . type ); alert ( 'pageX : ' + event . pageX ); alert ( 'pageY : ' + event . pageY ); alert ( 'Target : ' + event . target . innerHTML ); }); }); 

 Click on any square below to see the result:  class = "div" style = " background - color : blue ; " > ONE  class = "div" style = " background - color : green ; " > TWO  class = "div" style = " background - color : red ; " > THREE 

Methods of the Event object in jQuery

The following lists the methods that can be called on an Event object in jQuery:

Formula & Description1 preventDefault ()

Prevent the browser from executing the default action

2 isDefaultPrevented ()

Returns whether or not the event.preventDefault () method was called on this Event object

3 stopPropagation ()

Stop the bubble an event to the parent elements, preventing any parent element from being notified of the event

4 isPropagationStopped ()

Returns yes or no event.stopPropagation () used to call on this Event event

5 stopImmediatePropagation ()

Stop the rest of the Handler from being executed

6 isImmediatePropagationStopped ()

Returns yes or no event.stopImmediatePropagation () has been called on this Event object

Methods to manipulate Event objects in jQuery

The table below lists important methods related to Events in jQuery:

Method & Description1 bind (type, [data], fn)

Bind a Handler to one or more events for each matched element. Can also bind Custom events

2 off (events [, selector] [, handler (eventObject)])

It removes a bind event

3 hover (over, out)

Mimic the hover for example movement of the mouse and leave an object

4 on (events [, selector] [, data], handler)

Bind a Handler to an event for all current, future, and connected elements. Can also bind custom events.

5 one (type, [data], fn)

Bind a Handler to one or more events to be executed once for each matched element

6 ready (fn)

Bind a function to be executed whenever the DOM is ready to be manipulated

7 triggers (event, [data])

Activate an event on each matched element

8 triggerHandler (event, [data])

Enabling all Event Handler is bound on an element

9 unbind ([type], [fn])

By doing the opposite of bind, it removes objects that are bound from each matched element

The Event Helper methods in jQuery

jQuery also provides a set of Event Helper functions that can be used to either trigger an event or to bind any type of event mentioned above.

Trigger methods in jQuery

Below is an example that will trigger the blur event on all paragraphs:

 $ ("p"). blur (); 

Binding method in jQuery

The following example will bind a click event on all elements

 $ ("div"). click (function () { 
 // do something here 
 }); 

The table below lists all the methods supported by jQuery:

Formula & Description1 blur ()

Activate the blur event of each matched element

2 blur (fn)

Bind a function to the blur event of each matched element

3 change ()

Enable the change event of each matched element

4 change (fn)

Bind a function to the change event of each matched element

5 clicks ()

Activate the click event of each matched element

6 click (fn)

Bind a function to the click event of each matched element

7 dblclick ()

Enable the dblclick event of each matched element

8 dblclick (fn)

Bind a function to the dblclick event of each matched element

9 error ()

Activate the error event of each matched element

10 error (fn)

Bind a function to the error event of each matched element

11 focus ()

Activate the focus event of each matched element

12 focus (fn)

Bind a function to the focus event of each matched element

13 keydown ()

Enable the keydown event of each matched element

14 keydown (fn)

Bind a function to the keydown event of each matched element

15 keypress ()

Enable the keypress event of each matched element

16 keypress (fn)

Bind a function to the keypress event of each matched element

17 keyup ()

Enable the keyup event of each matched element

18 keyup (fn)

Bind a function to the keyup event of each matched element

20 load (fn)

Bind a function to the load event of each matched element

21 mousedown (fn)

Bind a function to the mousedown event of each matched element

22 mouseenter (fn)

Bind a function to the mouseenter event of each matched element

23 mouseleave (fn)

Bind a function to the mouseleave event of each matched element

24 mousemove (fn)

Bind a function to the mouseover event of each matched element

25 mouseout (fn)

Bind a function to the mouseout event of each matched element

26 mouseover (fn)

Bind a function to the mouseover event of each matched element

27 mouseup (fn)

Bind a function to the mouseup event of each matched element

28 resize (fn)

Bind a function to the resize event of each matched element

29 scroll (fn)

Bind a function to the scroll event of each matched element

30 select ()

Activate the select event of each matched element

31 select (fn)

Bind a function to the select event of each matched element

32 submit ()

Activate the submit event of each matched element

33 submit (fn)

Bind a function to the submit event of each matched element

34 unload (fn)

Bind a function to the unload event of each matched element

Follow tutorialspoint

Last lesson: DOM manipulation in jQuery

Next post: jQuery Ajax

Samuel Daniel

Update 25 May 2019