jQuery 事件 unbind() 方法

jQuery 的 unbind() 方法用於從選定的元素中移除事件處理程式。此方法還可以移除所有或僅選定的事件處理程式，或者阻止指定函式在事件發生時執行。

在從元素中移除多個事件時，請確保事件值之間用空格分隔。

此方法類似於事件 off() 方法，兩者都用於移除事件處理程式。

unbind() 方法已在 jQuery 3.0 版本中棄用，您可以使用 off() 方法代替。

語法

以下是 jQuery 事件 unbind() 方法的語法：

$(selector).unbind(eventType, function, eventObj);

引數

此方法接受三個引數，分別名為“eventType”、“function”和“eventObj”，下面將對其進行描述：

eventType（可選） - 指定要從元素中移除的一個或多個事件。
function（可選） - 指定要從元素的指定事件中取消繫結的函式的名稱。
eventObj（可選） - 指定要移除的事件物件。

返回值

此方法不返回任何值，但會移除事件處理程式。

示例 1

以下是 jQuery 事件 unbind() 方法的基本示例：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Click on me!</p>
    <div>Click on the below button to remove the event handler</div><br>
    <button>Remove event handler from p element.</button>
    <script>
        $('p').bind("click", function(){
            alert("Click event occured.")
        });
        $('button').click(function(){
            $('p').unbind("click");
            alert("Event handler removed from p element");
        });
    </script>
</body>
</html>

輸出

執行上述程式後，將顯示一個“p”元素和一個按鈕。當用戶單擊按鈕時，事件處理程式將從“p”元素中移除：

示例 2

以下是 jQuery 事件 unbind() 方法的另一個示例。我們使用此方法從選定的元素中移除多個事件處理程式：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div{
            width: 300px;
            padding: 10px;
            background-color: green;
            color: white;
        }
        span{
            font-size: 20px;
            margin: 20px 0px;
        }
    </style>
</head>
<body>
    <p>Click, mouse over, and mouse out on the below box</p>
    <div>Tutorialspoint</div><br>
    <button>Remove mouseover and mouseout event</button>
    <br><br>
    <span></span>
    <script>
        $('div').bind("click mouseover mouseout", function(){
            $('span').text("Event bound with div element")
            $('span').css("color", "green");
        });
        $('button').click(function(){
            $('div').unbind("mouseover mouseout");
            $('span').text("Removed....! Only the click event remained bind");
            $('span').css("color", "red");
        });
    </script>
</body>
</html>

輸出

上述程式顯示了一個框和一個按鈕，當用戶在框上單擊、懸停和移出時，相應的事件繫結到 div 元素，當用戶單擊按鈕時，僅從 div 元素中移除選定的事件處理程式：

示例 3

如果我們省略所有引數，unbind() 方法將從選定的元素中移除所有事件處理程式：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div{
            width: 200px;
            padding: 10px;
            color: white;
            background-color: green;
        }
    </style>
</head>
<body>
    <p>Click on the below button to remove all bind event handlers</p>
    <div>Tutorialspoint</div><br>
    <button>Remove all</button> <span></span>
    <script>
        $('div').bind("click mouseover mouseout", function(){
            alert("Three events bind with div element")
        });
        $('button').click(function(){
            $('div').unbind();
            $('span').text("All event handlers removed successfully....!");
        })
    </script>
</body>
</html>

輸出

執行程式後，將顯示一個 div 元素和一個按鈕。當單擊按鈕時，所有事件處理程式將從 div 元素中移除：

jquery_ref_events.htm

列印頁面