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.com/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.com/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.com/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.com/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

打印页面