jquery on remove event binding-Front-end Q&A-php.cn

jquery on remove event binding

PHPz

Release： 2023-05-28 17:38:38

Original

726 people have browsed it

In front-end development, in order to achieve various interactive effects, we will bind events to page elements so that they can perform specific operations in certain scenarios. However, sometimes we need to remove the binding of an event. For example, when an element is destroyed or no longer needs to listen to an event, we need to unbind its corresponding event handler from the element. In jQuery, multiple methods are provided to implement event binding and unbinding, such as on(), off(), unbind() wait. This article will mainly introduce how to remove event binding in the on() method.

jQuery event processing

In jQuery, there are generally three event processing methods, namely bind(), delegate() and live(). Among them, delegate() is rarely used, and its main function is to add event handlers for parent elements for dynamically added child elements; live() in jQuery1.7 It was deprecated after version 1 and can be replaced by on().

on() is a commonly used event handling method in jQuery, which is used to bind one or more event handling functions to a specified element. Common usage methods are as follows:

$(selector).on(event, handler);

Copy after login

Among them, selector is the target element that needs to be bound to the event, which can be a selector such as label, class name, ID, etc.; event It is the bound event type, such as click, mouseover, keyup, etc.; handler is the event processing function, which can be an anonymous function or a defined function name.

As project requirements and code scale continue to grow, it may happen that an element is bound to the same event by multiple callback functions. At this time, we need to remove an element bound to the element. Or all event handlers. Next, we will introduce how to use the parameters in on() to remove the binding of the event.

Remove the specified handler

If we only need to remove the specified event handler on the element, we can use the off() method. This method is used to remove the event handler function related to the specified element. Common usage methods are as follows:

$(selector).off(event, handler);

Copy after login

Among them, selector is the target element that needs to be removed, which can be a selector such as label, class name, ID, etc.; event It is the event type that needs to be removed, such as click, mouseover, keyup, etc.; handler is the event handling function to be removed, which can be an anonymous function or a defined function name.

Next, we use a specific example to demonstrate the use of the off() method to remove event binding.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>移除指定事件处理程序</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button id="btn">点击绑定事件</button>
    <script>
        function handleClick() {
            console.log('处理click事件');
        }

        $('#btn').on('click', handleClick);

        setTimeout(() => {
            $('#btn').off('click', handleClick);
            console.log('移除click事件处理程序');
        }, 2000);
    </script>
</body>
</html>

Copy after login

In the above code, we bind a click event on the button element, and the bound event handler is handleClick. Then, after 2 seconds, we remove the click event handler handleClick using the off() method. When we click the button, the information handling the event will be printed on the console. After removing the handler, nothing happens when the button is clicked again. This is the basic operation of removing the specified event handler through the off() method.

Remove all handlers related to the element

During development, we may also need to remove all event handlers bound to an element. In this case, we can use Another form of off() method:

$(selector).off(event);

Copy after login

This method only needs to pass in one parameter event, which will remove all event handlers of the specified type from the element.

Use one()

In addition to off(), there is another method in jQuery that can be used to remove event binding, which is one(). This method is very similar to on(), but it will only listen to the event once and will automatically unbind after execution. So if you need to add an event handler on an element that only needs to be executed once, you can use one() instead of on() to bind the event manually, so you don't have to manually Unbound.

$(selector).one(event, handler);

Copy after login

Like the on() method, one() also receives two parameters, specifying the event type and handler to be bound. When the specified event type is triggered, the handler is executed. When the handler completes execution, the corresponding event will be automatically removed.

Use unbind()

The unbind() method can also be used to remove event binding. Similar to off(), unbind() also has two usages, which are to remove the specified event handler and to remove all types of event handlers. The usage is as follows:

$(selector).unbind(event, handler); // 移除指定事件处理程序

$(selector).unbind(event); // 移除全部事件处理程序

Copy after login

Summary

This article mainly introduces the use of on(), off(), one in jQuery () and unbind() methods to handle event binding and unbinding operations. For different needs, you can choose the appropriate method to handle event binding, making the code more flexible and efficient. It is worth noting that when unbinding, you must pay attention to the correct passing of parameters, otherwise unexpected situations may occur.

The above is the detailed content of jquery on remove event binding. For more information, please follow other related articles on the PHP Chinese website!