As you may already know, there are quite a few mouse events, keyboard events, browser events, DOM element events etc that you can capture with JavaScript and then use some jQuery to perform actions based on the event fired using bind(), live() or such. Here is a list of the main events which you should be aware of.
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error
Mouse Events
scroll, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, load, resize, scroll, unload, error,Example Usage
(function($)
{
$(document).ready(function()
{
$('#id).bind('click', function(e)
{
//mouse event fired (element clicked)
});
});
})(jQuery);Keyboard Events
keydown, keypress, keyupExample Usage
(function($)
{
$(document).ready(function()
{
$(document).bind('keypress', function(e)
{
//keyboard event fired
});
});
})(jQuery);Browser Events
load, resize, scroll, unload, errorExample Usage
(function($)
{
$(document).ready(function()
{
//browser event fired (document object model loaded)
});
})(jQuery);DOM Element Events
blur, focus, focusin, focusout, change, select, submitExample Usage
(function($)
{
$(document).ready(function()
{
$('#id).bind('blur', function(e)
{
//dom event fired (input focus)
});
});
})(jQuery);Demo
See: Find the Keycode of Keyboard Key PressedFrequently Asked Questions (FAQs) about jQuery List Events Bind
What is the difference between .bind() and .on() in jQuery?
The .bind() and .on() methods in jQuery are both used to attach events to elements. However, there are some key differences between the two. The .bind() method was the original method provided by jQuery to attach events. It does not work for elements added dynamically after the page has loaded. On the other hand, the .on() method, introduced in jQuery 1.7, works for both existing elements and future elements added dynamically. It is now recommended to use .on() for new code as it has better performance and more features.
How can I unbind an event in jQuery?
To unbind an event in jQuery, you can use the .unbind() method. This method removes event handlers that were attached with the .bind() method. You can either remove all event handlers of an element, or only remove a specific event handler by specifying the event type as a parameter. For example, $(“#element”).unbind(“click”) will remove all click event handlers of the element with the id “element”.
Can I bind multiple events to the same element in jQuery?
Yes, you can bind multiple events to the same element in jQuery. You can do this by passing an object to the .on() method where the keys are the event names and the values are the event handlers. For example, $(“#element”).on({click: function(){}, mouseover: function(){}}) will bind both a click and mouseover event to the element with the id “element”.
How can I stop event propagation in jQuery?
To stop event propagation in jQuery, you can use the .stopPropagation() method. This method prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. You can call this method inside your event handler like this: function(event){ event.stopPropagation(); }.
What is event delegation in jQuery and how can I use it?
Event delegation in jQuery is a technique where you delegate the handling of events to a parent element instead of binding the event to the specific elements. This is particularly useful when you have a large number of elements or when elements are added dynamically. You can use event delegation with the .on() method by specifying a selector as the second argument. For example, $(“#parent”).on(“click”, “.child”, function(){}) will delegate the click event of all child elements of the parent element to the parent element.
How can I trigger an event programmatically in jQuery?
To trigger an event programmatically in jQuery, you can use the .trigger() method. This method triggers the specified event and the default behavior of an event (like form submission) on the selected elements. For example, $(“#element”).trigger(“click”) will programmatically trigger a click event on the element with the id “element”.
Can I pass data to an event handler in jQuery?
Yes, you can pass data to an event handler in jQuery. You can do this by passing an object as the second argument to the .on() method. The properties of this object will be available as properties of the event object inside the event handler. For example, $(“#element”).on(“click”, {name: “John”}, function(event){ alert(event.data.name); }) will alert “John” when the element is clicked.
What is the difference between .live() and .on() in jQuery?
The .live() and .on() methods in jQuery are both used to attach events to elements. However, the .live() method, which was deprecated in jQuery 1.7, has some limitations and quirks. It does not work well with certain events like “submit” and “focus”, and it attaches the event handlers to the document root, which can lead to performance issues. On the other hand, the .on() method overcomes these limitations and is now the recommended method to use.
How can I prevent the default action of an event in jQuery?
To prevent the default action of an event in jQuery, you can use the .preventDefault() method. This method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. You can call this method inside your event handler like this: function(event){ event.preventDefault(); }.
Can I bind an event to an element only once in jQuery?
Yes, you can bind an event to an element only once in jQuery. You can do this by using the .one() method. This method works just like the .on() method, but the event handler is removed after it has been triggered once. For example, $(“#element”).one(“click”, function(){}) will trigger the click event handler only once for the element with the id “element”.
Sam DeeringSam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.
