jQuery bind() 方法

jQuery 的bind()方法將一個或多個事件處理程式附加（或繫結）到選定的元素，並指定一個在事件發生時執行（或執行）的函式。

您可以將此方法與其他方法（如ready()）結合使用（或一起使用），而不是單獨使用它。

以下是可能的事件值的列表

click（點選）
upload（上傳）
mouseenter（滑鼠進入）
mouseleave（滑鼠離開）
scroll（滾動）
blur, focus 等

語法

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

$(selector).bind( eventType [, eventData ], handler )

引數

此方法接受三個引數：'eventType'、'eventData' 和 'handler'，如下所述：

eventType − 包含一個或多個 DOM 事件型別的字串，例如“click”或“submit”。
eventData（可選） − 這是一個可選引數，包含將傳遞給事件處理程式的資料。
handler − 每次觸發事件時要執行的函式。

返回值

此方法不返回值；而是將處理程式（一個函式）附加到元素的事件。

示例 1

以下是 jQuery 事件bind()方法的基本示例。在這裡，它將處理程式繫結到按鈕元素的“click”事件：

<html>
    <head>
        <script type = "text/javascript" src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
    </head>
<body>
    <p>Click on the below button to pop up an alert message.</p>
    <button>Submit</button>
    <script>
        $(document).ready(function(){
            $('button').bind('click', function(event){
                alert("You clicked on button");
            });
        });
    </script>
</body>
</html>

輸出

執行上述程式後，將顯示以下輸出。當用戶單擊按鈕時，將在筆記型電腦/計算機螢幕上彈出警報訊息：

示例 2

以下是 jQuery bind()方法的另一個示例。我們使用此方法將處理程式繫結到所有div元素的“mouseenter”事件。每當使用者將滑鼠懸停在 div 元素上時，都會在div元素下方顯示一條訊息：

<html>
    <head>
        <script type = "text/javascript" src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
      <style>
        div{
            background-color: red;
            width: 20%;
            margin: 2px 0px;
        }
      </style>
    </head>
<body>
    <p>Hover on the below div elements.</p>
    <div class="demo1">Div 1</div>
    <div class="demo2">Div 2</div>
    <div class="demo3">Div 3</div>
    <h3 id="demo"></h3>
    <script>
        $(document).ready(function(){
            $('div').bind('mouseenter', function(event){
                document.getElementById('demo').innerHTML = "Hey there..!";
            });
        });
    </script>
</body>
</html>

輸出

執行上述程式後，將顯示三個 div 元素。當用戶將滑鼠移入（或懸停）任何 div 元素上時，將顯示一條訊息：

示例 3

將多個事件繫結到選定的元素。

在此示例中，當滑鼠移入或移出 id 為“demo”的元素時，將切換類“highlight”：

<html>
    <head>
        <script type = "text/javascript" src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
      <style>
        .highlight{
            color: white;
            background-color: black;
            width: 20%;
            padding: 20px;
        }
      </style>
    </head>
<body>
    <div id="demo">Hello World</div>
    <script>
       $('#demo').bind('mouseenter mouseleave', function() {
           $(this).toggleClass('highlight');
        });
    </script>
</body>
</html>

輸出

當滑鼠移入或移出選定元素時，將切換“highlight”類，這將應用具有黑色背景和白色文字的樣式：

示例 4

讓我們看看 jQuery bind()方法的即時用法。此方法將“click”事件處理程式附加到按鈕元素。因此，當用戶單擊按鈕時，將根據輸入欄位是否為空顯示不同的訊息：

<html>
    <head>
        <script type = "text/javascript" src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
      <style>
        input{
            margin: 10px 0px;
            display: block;
        }
      </style>
    </head>
<body>
    <input type="text" placeholder="Username" id="uname">
    <input type="text" placeholder="Password" id="password">
    <span></span>
    <button>Login</button>
    <script>
        $(document).ready(function(){
            $('button').bind('click', function(event){
                let uname = document.querySelector('#uname');
                let password = document.querySelector("#password");
                if(uname.value.trim().length == 0){
                    document.querySelector('span').innerHTML= 'Username is required field...!';
                    document.querySelector('span').style.color= 'red';
                }
                else if(password.value.trim().length == 0){
                    document.querySelector('span').innerHTML= 'Password is required field...!';
                    document.querySelector('span').style.color= 'red';
                }
                else{
                    document.querySelector('span').innerHTML= 'Loggedin successfully...!';
                    document.querySelector('span').style.color= 'green';
                }
            });
        });
    </script>
</body>
</html>

輸出

該程式顯示一個帶有兩個輸入欄位和一個按鈕的表單。在事件處理程式（函式）中，我們實現了驗證：如果輸入欄位為空，則將顯示紅色訊息；否則，在表單提交後將出現綠色訊息（空輸入欄位）：

當輸入欄位包含某些資料或資訊時：

jquery_ref_events.htm

列印頁面