The event jQuery event handling methods are core functions in jQuery. When something happened in HTML we are calling the event handling methods. Here we are using the term “triggered (or “fired”) by an event”. Commonly we put J\jQuery code into event handler methods in the <head> section.
Eg: –
<!DOCTYPE html>
<html>
<head>
<script type=“text/javascript” src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
In the above example a function is called when the click event for the button is triggered. When a click event is happened the method hides all <p> elements.
Event Methods
For all matching elements the event methods trigger or bind a function to an event.
Example of trigger:-
$(“button”).click() – triggers the click event for a button element.
Example of binding:-
$(“button”).click(function(){$(“img”).hide()}) – binds a function to the click event.
1) $(selector).click(function):- It triggers, or binds a function to the click event of selected elements.
2) $(selector).dblclick(function):- It triggers, or binds a function to the double click event of selected elements
3) bind():- The bind() method add one or more event handlers for selected or matched elements and specifies a function to run when the events occur.
Syntax1:-
$(selector).bind(event,data,function):-
Here the parameters event and function are optional and the parameter data is optional. The parameter event specifies one or more events to attach to the elements. Multiple event values are separated by space and it must be a valid event. The parameter data defines an additional data to pass along to the function. The parameter function defines the function to run when the event(s) occur.
Syntax2:-
$(selector).bind({event:function, event:function, ...})
The parameter {event:function, event:function, …} defines an event map containing one or more event to attach to the elements, and functions to run when the events occur.
4) blur():- This event is occurred when an element loses focus. Triggering the blur event for the selected items we are using the below syntax.
Syntax: –
$(selector).blur()
Bind a function to the blur Event defines a function to run when the blur event occurs for the selected elements.
Syntax: –
$(selector).blur(function)
The parameter function is optional and it defines the function to run when the blur event occurs.
5) change():- When the value of an element is changed or only works on text fields or text areas select elements the change event is occurred. For the select menus, the change event occurs when an option is selected and for the text fields or text areas, the change event occurs when the field loses focus.
Example of trigger the change event:-
Eg:- $(selector).change()
Syntax of Bind a Function to the change Event: –
$(selector).change(function)
The parameter function is optional and it defines the function to run when the change event occurs.
6) delegate():-The delegate() method adds one or more event handlers for defined elements that are children of selected elements, and defines a function to run when the events occur. The delegate() method will work for both current and future elements.
Syntax: –
$(selector).delegate(childSelector,event,data,function):-
The parameters childSelector, event and function is needed. The parameter data is optional. The childSelector defines one or more child elements to attach the event handler and event defines one or more events to attach to the elements. Multiple event values are separated by space and it must be a valid event. The parameter data defines additional data to pass along to the function and the parameter function defines the function to run when the event(s) occur.
READ JQuery Basics
7) die():-The die() method vanishes one or more event handlers, added with the live() method, for the selected elements.
Syntax: –
$(selector).die(event,function)
In the above syntax the parameter “event” is needed and “function” is optional. The event defines one or more event handlers to remove. Multiple event values are separated by space and it must be a valid event. The function defines a specific function to remove.
8) error():- When an element encounters an error the error event occurred.
Eg: – if the element is not loaded correctly.
The error() method is a shortcut for bind(‘errror’,handler) method.
Syntax of trigger the error event: –
$(selector).error()
The above syntax trigger the error event for the selected elements.
Syntax of bind a function to the error event: – $(selector).error(function)
In the above syntax the parameter function is optional and defines the function to run when the error event occurs.
9) event.currentTarget:- The current DOM element within the event bubbling phase.
10) event.data:-It contains the optional data passed to jQuery.fn.bind when the current executing handler was bound
11) event.isDefaultPrevented():- This method returns whether or not the preventDefault() method is called for the specified event object.
Syntax: –
event.isDefaultPrevented()
In the above syntax the parameter event is needed and defines the event to check. The event parameter comes from the event binding function.
12) event.isImmediatePropagationStopped():-It returns whether
event.stopImmediatePropagation() was called for the event object
13) event.isPropagationStopped():- It returns whether event.stopPropagation() was called for the event object.
14) event.pageX:- The pageX() method used to identify the position of the mouse pointer relative to the left edge of the document.
Syntax: – event.pageX
In the above syntax the parameter event is needed and it used to define the event to use. The event parameter comes from the event binding function.
15) event.pageY:- The pageY() helps to identify the position of the mouse pointer relative to the top edge of the document.
Syntax:- event.pageY
In the above syntax the parameter event defines the event to use. The event parameter comes from the event binding function.
16) event.preventDefault():- This method helps to prevent the default action of an element from happening.
Eg: – Preventing a form being submitted when a submit button is clicked.
Syntax: – event.preventDefault()
The parameter event defines the event to prevent the default action. The event parameter comes from the event binding function.
17) event.relatedTarget:- The other DOM element involved in the event.
18) event.result:- This property consists of the last value returned by an event handler function that was triggered by the specified event.
READ JQuery Utilities
Syntax:-event.result
The parameter event defines the event to get the last returned value from. The event parameter comes from the event binding function.
19) event.stopImmediatePropagation():-It prevents other event handlers from being called.
20) event.stopPropagation():-It prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
21) event.target:-It defines which DOM element triggered the event.
Syntax:- event.target
The parameter event defines the event to check. The event parameter comes from the event binding function.
22) event.timeStamp:- This property consists of the number of milliseconds since January 1 1970, for when the event is triggered.
Syntax:- event.timeStamp
The parameter event determines the event to get the timestamp for. The event parameter comes from the event binding function.
23) event.type:- This property describes the nature of the event.
24) event.which:- In this property includes which key or button was pressed for a key or button event.
25) focus():- It triggers, or binds a function to the focus event of selected elements.
Syntax for trigger: – $(selector).focus()
Syntax for binding function: – $(selector).focus(function)
26) focusin():- It binds a function to the focusin event of selected elements.
Syntax: – $(selector).focusin(function())
27) focusout():- It binds a function to the focusout event of selected elements.
Syntax: – $(selector).focusout(function)
28) hover():-It binds one or two functions to the hover event of selected elements.
Syntax: – $(selector).hover(inFunction,outFunction)
The parameter inFunction defines the function to run when the mouseenter event occurs. This function will be run for both the mouseenter and mouseleave events. The parameter outFunction defines the function to run when the mouseleave event occurs.
29) keydown():- It triggers, or binds a function to the keydown event of selected elements.
Syntax for trigger: – $(selector).keydown()
Syntax for bind: – $(selector).keydown(function)
30) keypress():- It triggers, or binds a function to the keypress event of selected elements.
Syntax for trigger: – $(selector).keypress()
Syntax for bind: – $(selector).keypress(function)
31) keyup():- It triggers, or binds a function to the keyup event of selected elements.
Syntax for trigger: – $(selector).keyup()
Syntax for bind: – $(selector).keyup(function)
32) live():- It add one or more event handlers to current, or future, matching elements.
Syntax: – $(selector).live(event,data,function)
33) load():-It triggers, or binds a function to the load event of selected elements.
Syntax: – $(selector).load(function)
34) mousedown():-It triggers, or binds a function to the mouse down event of selected elements.
Syntax for trigger: – $(selector).mousedown()
Syntax for bind a function: – $(selector).mousedown(function)
35) mouseenter():- It triggers, or binds a function to the mouse enter event of selected elements.
Syntax for trigger: – $(selector).mouseenter()
Syntax for bind a function: – $(selector).mouseenter(function)
36) mouseleave():-It triggers, or binds a function to the mouse leave event of selected elements.
Syntax for trigger: – $(selector).mouseleave()
Syntax for bind a function: – $(selector).mouseleave(function)
37) mousemove():-It triggers, or binds a function to the mouse move event of selected elements.
Syntax for trigger: – $(selector).mousemove()
Syntax for bind a function: – $(selector).mousemove(function)
38) mouseout():- It triggers, or binds a function to the mouse out event of selected elements.
Syntax for trigger: – $(selector).mouseout()
READ JQuery HTML Manipulation
Syntax for bind a function: – $(selector).mouseout(function)
39) mouseover():-It triggers, or binds a function to the mouse over event of selected elements.
Syntax for trigger: – $(selector).mouseover()
Syntax for bind a function: – $(selector).mouseover(function)
40) mouseup():- It triggers, or binds a function to the mouse up event of selected elements.
Syntax for trigger: – $(selector).mouseup()
Syntax for bind a function: – $(selector).mouseup(function)
41) one():- This method adds one or more event handlers to matching elements. This handler can only be triggered once per element.
Syntax: – $(selector).one(event,data,function)
42) ready():-This method binds a function to the ready event of a document (when an HTML document is ready to use).
Syntax1:- $(document).ready(function)
Syntax2:- $().ready(function)
Syntax3:- $(function)
43) resize():-It triggers, or binds a function to the resize event of selected elements.
Syntax for trigger: – $(selector).resize()
Syntax for bind: – $(selector).resize(function)
44) scroll():-This method triggers, or binds a function to the scroll event of selected elements.
Syntax for trigger: – $(selector).scroll()
Syntax for bind: – $(selector).scroll(function)
45) select():-It triggers, or binds a function to the select event of selected elements.
Syntax for trigger: – $(selector).select()
Syntax for bind: – $(selector).select(function)
46) submit():-this method triggers, or binds a function to the submit event of selected elements.
Syntax for trigger: – $(selector).submit()
Syntax for bind: – $(selector).submit(function)
47) toggle():- It binds two or more functions to the toggle between for the click event for selected elements
Syntax1:- $(selector).toggle(function(),function(),function(),…)
The first parameter defines a function to run every EVEN time the element is clicked. The second parameter specifies a function to run every ODD time the element is clicked and third parameter defines an additional function to toggle between.
Syntax2:- $(selector).toggle(speed,callback)
The parameter speed defines the speed of the hide/show effect. Default is “0”. The possible values are,
1) milliseconds (like 1500)
2) “slow”
3) “normal”
4) “fast”
The parameter callback, a function to be executed after the toggle() method is completed.
Syntax3:- $(selector).toggle(switch)
The parameter switch is a Boolean value that defines if toggle() should only show or only hide all selected elements.
1) true – show elements
2) false – hide elements
48) trigger():-It triggers all events bound to the selected elements.
Syntax1:- $(selector).trigger(event,[param1,param2,…])
Syntax2:- $(selector).trigger(eventObj)
49) triggerHandler():-It triggers all functions bound to a specified event for the selected elements.
Syntax: – $(selector).triggerHandler(event,[param1,param2,…])
50) unbind():-It remove an added event handler from selected elements.
Syntax: – $(selector).unbind(event,function)
51) undelegate():- It remove an event handler to selected elements, now or in the future.
Syntax: – $(selector).undelegate(selector,event,function)
The parameter selector defines the selector to remove event handlers from. The parameter event defines one or more event types to remove handler functions from. The parameter function specifies a specific event handler function to remove.
52) unload():- It triggers, or binds a function to the unload event of selected elements. The unload event is triggered when,
- a link to leave the page is clicked
- a new URL is typed in the address bar
- the forward or back buttons are used
- the browser window is closed
- the page is reloaded
Syntax: – $(selector).unload(function)
No comments:
Post a Comment