jQuery Full List of Events You Can Bind To

JavaScript combined with jQuery can capture many mouse events, keyboard events, browser events and DOM element events, and use bind(), live() and other methods to perform event-triggered operations. The following list of the main events you should know: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error,

,

,

,

, scroll, click, dblclick, mousedown mouseupMouse Eventmousemove mouseovermouseout, mouseenter, mouseleave, load, resize, scroll, unload, error,

,

,

(function($) {
    $(document).ready(function() {
        $('#id').bind('click', function(e) {
            // 鼠标事件触发（元素被点击）
        });
    });
})(jQuery);

,

>

Example: keydown keypress keyupKeyboard Events

,

(function($) {
    $(document).ready(function() {
        $(document).bind('keypress', function(e) {
            // 键盘事件触发
        });
    });
})(jQuery);

,

,

loadExample: resize scroll unloadBrowser Eventserror

,

,

(function($) {
    $(document).ready(function() {
        // 浏览器事件触发（文档对象模型加载完成）
    });
})(jQuery);

,

,

,

blur focusExample: focusin focusout changeDOM element eventselect submit

,

,

,

(function($) {
    $(document).ready(function() {
        $('#id').bind('blur', function(e) {
            // DOM事件触发（输入焦点离开）
        });
    });
})(jQuery);

,

,

,

,

Example:

.bind() .on()Demo

Please refer to: Find the key code of the keyboard key .bind() .on()jQuery Event Binding List FAQs (FAQs).bind() What is the difference between .on() and .on() in

? The and methods in jQuery are both used to attach events to elements. However, there are some key differences between the two. The method is a method of additional events originally provided by jQuery. It does not work with elements that are dynamically added after the page is loaded. On the other hand, the method introduced in jQuery 1.7 is suitable for both existing elements and elements that are dynamically added later. Now it is recommended to use in the new code because it has better performance and more features.

How to unbind events in jQuery?

To unbind events in jQuery, you can use the .unbind() method. This method deletes the event handler attached using the .bind() method. You can delete all event handlers for an element, or just delete specific event handlers by specifying the event type as a parameter. For example, $("#element").unbind("click") will delete all click event handlers for elements with 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 key is the event name and the value is the event handler. For example, $("#element").on({click: function(){}, mouseover: function(){}}) binds both click and mouseover events to elements with id "element".

How to stop event propagation in jQuery?

To stop event propagation in jQuery, you can use the .stopPropagation() method. This method prevents events from bubbled in the DOM tree, preventing any parent handler from receiving event notifications. You can call this method in the event handler as follows: function(event){ event.stopPropagation(); }.

What is event delegate in jQuery and how can I use it?

Event delegation in jQuery is a technique where you delegate event processing to a parent element instead of binding events to a specific element. This is especially useful when you have a lot of elements or add elements dynamically. You can use the event delegate by specifying the selector as the second parameter using the .on() method. For example, $("#parent").on("click", ".child", function(){}) delegates the click event of all child elements to the parent element.

How to trigger an event programmatically in jQuery?

To trigger an event programmatically in jQuery, you can use the .trigger() method. This method triggers the default behavior of the specified events and events on the selected element (such as form submission). For example, $("#element").trigger("click") will programmatically trigger a click event on an element with id 'element'.

Can I pass data to event handler in jQuery?

Yes, you can pass data to event handlers in jQuery. You can do this by passing the object as a second parameter to the .on() method. The properties of this object will be available as properties in the event object within the event handler. For example, $("#element").on("click", {name: "John"}, function(event){ alert(event.data.name); }) will display "John" when the element is clicked.

What is the difference between

and .live() in .on()?

The

and .live() methods in .on()jQuery are both used to attach events to elements. However, there are some limitations and features of the deprecated .live() method in jQuery 1.7. It does not work with certain events (like "submit" and "focus") and it attaches the event handler to the document root, which can cause performance issues. On the other hand, the .on() method overcomes these limitations and is now the recommended method.

How to block the default action of events in jQuery?

To block the default action of events in jQuery, you can use the .preventDefault() method. If the event is cancelable, this method cancels the event, which means that the default action belonging to the event will not occur. You can call this method in the event handler as follows: function(event){ event.preventDefault(); }.

Can I bind events to elements only once in jQuery?

Yes, you can bind events to elements only once in jQuery. You can use the .one() method to achieve this. This method works the same way as the .on() method, but after the event handler is fired once, the event handler will be deleted. For example, $("#element").one("click", function(){}) will trigger the click event handler only once for elements with id "element".

The above is the detailed content of jQuery Full List of Events You Can Bind To. For more information, please follow other related articles on the PHP Chinese website!