Introduction to jQuery Events
JQuery is one of the most popular and widely used javascript libraries which is developed and designed to simplify the HTML based DOM architecture i.e. the document object model properties such as reading, manipulation and tree traversal. The other properties from jQueries such as event handling, Ajax, styling, and CSS animation is also simplified. It is an open-source and a free library which is used typically in 73% of the approx. 10 million websites that are being used today. The core features of Jquery include DOM element based properties such as selectors, manipulation and tree traversal which makes working on JQuery much more interesting, easier and convenient.
It is used to provide a very simple and plain looking interface that can be used for applying various kinds of amazing effects. These methods also allow quick usage and application of the most commonly used features and their effects along with bare to minimum configurations. The basic commands such as the ones for showing and hiding elements are pretty much the same and rest others also lie in the same category with what anybody willing to see them would expect. show() command, in this case, is used to show the elements in a wholly wrapped and a combined set and hide() command is used to hide those features.
Jquery is tailor-made which is used to respond to the events provided in an HTML page. The events in itself are the different visitors’ actions which can be responded to by the web page. In other words, an event is used to slightly represent the precise or the exact moment particularly something that has happened. This can include scenarios like Moving our mouse over the element, clicking and selecting the radio button and also clicking on the element. The term fires or the term fired is many a time used along with the event. For example, the keypress event is triggered or more popularly termed as fired, it is mainly when the moment you press the key. Here is the list of the most common and frequently used DOM events.
Mouse events such as dblclick, mouseleave, mouseenter, click. There are some other Keyboard events also such as Keypress, keyup, and keydown. There are other forms of events such as change, submit, blur and focus events. There are other events which are Document or Window events such as resize, load, scroll, unload, etc. in Jquery most of the DOM-based events have the corresponding jquery method. Therefore to assign a new event to all the existing paragraphs on the page, the below syntax can be made put to use.
Events and Syntax of jQuery
Here are the following events of jQuery with syntax given below
1. Click()
This event occurs whenever the element is clicked. This click() method is used to trigger the clicked element also known as the click event which is used to attach to a function whenever a click related event occurs.
4.5 (2,850 ratings)
View Course
Syntax
$(selector).click()
When you wish to attach a function to this click event,
$(selector).click(function)
The next step always comes along with the action and the trigger which forms the actual working and functioning of the function and therefore whenever the event gets fired, a function should be passed to the event.
Example
$("p").click(function(){
// action which is triggered goes here!! });
2. Dblclick()
This method is used to attach an event handler function to the HTML element provided. This function is executed whenever the user doubles click on the given HTML element.
Syntax
$(selector).dblclick()
Example
$("p").dblclick(function(){
$(this).hide();
});
3. change()
This event occurs whenever the value of a particular element is changed i.e. it only works for the input, textarea, and selected elements. The change() method is used to trigger change event or the one which gets attached to the function whenever a change related event has to occur.
Syntax
$(selector).change()
Example
$("input").change(function(){
alert("This text related to this has been changed.");
});
4. blur()
This event-related to blur occurs only when the element loses focus. The blur() method which is used to trigger the blur event or the one which is used to attach a function to be run whenever a blur event occurs. This method is used often with the focus() method.
Syntax
$(selector).blur()
Example
$("input").blur(function(){
alert("The field has lost its focus.");
});
5. data
This event.data property is used to contain the optional passed data related to an event method when the executing handler for the current is bound.
Syntax
event.data
Example
$("p").each(function(i){
$(this).on("click", {x:i}, function(event){
alert("This index + ". paragraph has data: " + event.data.x);
});
});
6. namespace
This property is used to return custom namespace whenever the event is triggered. The property is used to be set by plugin authors which can be used to handle tasks very differently which depends on the namespace which is used. The namespaces which have their beginning with the underscore are reserved namespaces for JQuery.
Syntax
event.namespace
Example
$("p").on("custom.someNamespace", function(event){
alert(event.namespace);
});
7. PageX
This is the page type property which is used to return the position of the mouse pointer which is related to the left side edge of the document. This kind of property is often used with the event. PageY property.
Syntax
event.PageX
Example
$(document).mousemove(function(event){
$("span text ").text("X: " + event.pageX);
});
8. PageY
This is the page type property which is used to return the position of the mouse pointer which is related to the top hand side edge of the document. This kind of property is often used with the event. PageX property.
Syntax
event.PageY
Example
$(document).mousemove(function(event){
$("span text ").text("Y: " + event.pageY);
});
9. result
The event.result property is used to contain the previous or the last value which is returned by the event handler which is specifically triggered by the specific event.
Syntax
event.result
Example
$("button").click(function(){
return "Hi there!";
});
10. preventDefault()
This event-related event.preventDefault() method is used to stop the default action of a particular element from happening. The examples of this scenario include:
Preventing of a submit button from submission of a form
Prevent a link from accessing a particular URL.
A particular event such as event.preventDefault() is used to check whether the preventDefault() method or function is used to call the event.
Syntax
event.preventDefault()
Example
$("a").click(function(event){
event.preventDefault();
});
11. Event.target()
This property is used to return which DOM element is to be triggered by this event. It is most often than not useful to compare the event.target to this to be done to determine if the particular event is being handled due to an event called bubbling.
Syntax
event.target
Example
$("p, button, h2").click(function(event){
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
});
12. timeStamp
This property is used to return the number of milliseconds since the time of January 1, 1970, which corresponds to the first time when the event was first actually triggered.
Syntax
event.TimeStamp
Example
$("button").click(function(event){
$("span").text(event.timeStamp);
});
13. type
This is used to monitor the event and its type which is triggered.
Syntax
event.type
Example:
$("p").on("click dblclick and mouse related events", function(event){
$("div").html("Event: " + event.type);
});
14. which()
This property is used to return the keyboard key or mouse button which was pressed for the event.
Syntax
event.which
Example
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
15. focus()
This property and the focus for this event occurs when an element is used to get the focus which occurs when it is selected by the mouse click or by navigating a tab onto it. The focus () method is used to trigger the focus event or attach a function to run when a focus related event occurs.
Syntax
$(selector).focus()
Example
$("input").focus(function(){
$("span").css("display", "inline").fadeOut(200);
});
16. hover()
This hover method is used to specify two functions used to run when the mouse pointer hovers over all the elements which are selected. This method triggers both the mouseleave and mouseenter events. If there is only one function which is specified, it will run for both the mouseleave and mouseenter events.
Syntax
$(selector).hover(inFunction,outFunction)
Example
$("p").hover(function(){
$(this).css("background-color", "blank");
}, function(){
$(this).css("background-color", "yellow");
});
17. keydown()
The order of the events which are related to keydown event are:
- Keydown: This is used when the key is on its way down.
- Keypress: This occurs when the key of the keyboard is pressed
- Keyup: As the name suggests, this is used when the key of the upward side is pressed.
Syntax
$(selector).keydown()
Example
$("input").keydown(function(){
$("input").css("background-color", "black");
});
18. keypress()
The order of the events which are related to keypress event is:
- Keydown: This is used when the key is on its way down.
- Keypress: This occurs when the key of the keyboard is pressed
- Keyup: As the name suggests, this is used when the key of the upward side is pressed.
Syntax
$(selector).keypress()
Example
$("input").keypress (function(){
$("input").css("background-color", "black");
});
19. keyup()
The order of the events which are related to keyup event is:
- Keydown: This is used when the key is on its way down.
- Keypress: This occurs when the key of the keyboard is pressed
- Keyup: As the name suggests, this is used when the key of the upward side is pressed.
Syntax
$(selector).keyup()
Example
$("input").keyup(function(){
$("input").css("background-color", "black");
});
20. Live()
This lives () method or function of the jquery is used to attach one or more event-based handlers to be used particularly for the selected lists of elements and it also specifies the function to be run where the events occur. All the event handlers are attached using the live() method which will work for both current and FUTURE elements which are based on matching the selector elements which can be like a new element created by the script. The die() method can be used to destroy the live() method.
Syntax
$(selector).live(event,data,function)
Example
$("button").live("click", function(){
$("p").slideToggle();
});
21. Load()
The load method is used to attach an event handler to the load based event. The load event occurs whenever a specified This event occurs and works whenever the elements associated with the URL such as image, frame, script, iframe and the window object. The load event may or may not trigger and it depends on the browser even if the image is cached. There is also an AJAX method which is a jquery method known as load(), the one which is called depends on the parameters.
Syntax
$(selector).load(function)
Example
$("img").load(function(){
alert("stuff loaded.");
});
22. Mousedown
This event occurs only when the left mouse pointer button is pressed down over the selected list of the element. The mousedown () method or function is used to trigger this event which attaches a function and it runs whenever a mousedown event happens. This method is often used together along with with the mouseup() method.
Syntax
$(selector).mousedown()
Example
$("div").mousedown(function(){
$(this).after("Down button pressed with mouse.");
});
23. Off()
This method is used to remove an event handler which is attached along with the on() method. It can be said to be the replacement of the unbind() method, die() method and undelegate() method. This method is used to bring in a lot of consistency to the API and it is always recommended to make use of this method as this is used to simplify the Jquery code base.
Syntax
$(selector).off(event,selector,function(eventObj),map)
Example
$("button").click(function(){
$("p").off("click");
});
24. mouseenter()
This event occurs whenever the mouse pointer is over the element specified and enters as it triggers the mouseenter event or it is used to attach a function that can be used to run whenever a mouseenter based event occurs.
Syntax
$(selector).mouseenter()
Example
$("p").mouseenter(function(){
$("p").css("background-color", "black");
});
25. mouseleave()
This event occurs whenever the mouse pointer is over the element specified and leaves as it triggers the mouse leaves event or it is used to deattach a function that can be used to run whenever a mouseleave based event occurs.
Syntax
$(selector).mouseleave()
Example
$("p").mouseleave(function(){
$("p").css("background-color", "black");
});
Jquery is one of the most used libraries when it comes to front end development. This provides unique features and a broad range of functions which helps in making the lives of developers and people all-around easy and convenient. Hope you liked our article. Stay tuned to our blog for more like these.
Recommended Articles
This is a guide to jQuery Events. Here we discuss the list of the most common and frequently used various events of jQuery with Syntax and examples. You may also have a look at the following articles to learn more –
- jQuery Effects
- jQuery Methods
- jQuery Attributes
- How to Install Jquery?
- Top 8 jQuery Selectors with Code Implementation
- Learn the JQuery Progress Bar Examples
- Guide to Different JavaScript Events
- Guide to jQuery delegate( )
- Complete Overview of jQuery keydown()
- Guide to Examples of jQuery load()
- Examples of jQuery Slidetoggle()
- Examples to Implement jQuery toggle()
- Complete Guide to jQuery bind()
- jQuery mousedown | Top 6
- jQuery hide() | Syntax | Code | Examples
