jQuery如何使用bind()方法？代码示例

bind()是jQuery中的内置方法, 用于为所选元素附加一个或多个事件处理程序, 并且此方法指定事件发生时要运行的函数。

语法如下：

$(selector).bind(event, data, function);

参数：它接受下面指定的三个参数-

1. 事件：这是事件类型, 将传递给所选元素。
2. 数据：这是可以在所选元素上显示的数据。
3. 功能：这是由所选元素执行的功能。

返回值：它返回对选定元素所做的所有修改。

jQuery代码显示bind()方法的工作方式：

代码1：

在下面的代码中, 使用此方法将" click"事件附加到给定的段落中。

< html >
  
< head >
     < script src="https://ajax.googleapis.com/ajax/libs/
               jquery/3.3.1/jquery.min.js"></ script >
     < script >
         $(document).ready(function() {
             $("p").bind("click", function() {
                 alert("Given paragraph was clicked.");
             });
         });
     </ script >
     < style >
         p {
             display: block;
             padding: 50px;
             width: 280px;
             border: 2px solid green;
         }
     </ style >
</ head >
  
< body >
     < p >Click me!</ p >
</ body >
  
</ html >

输出如下：

在点击"点击我"框之前,

点击"点击我"框后,

代码2：

在下面的代码中, 添加了相同的" click"事件, 但是这次数据也传递给了该方法。

< html >
  
< head >
     < script src="https://ajax.googleapis.com/ajax/libs/
           jquery/3.3.1/jquery.min.js"></ script >
     < script >
         function handlerName(e) {
             alert(e.data.msg);
         }
         <!--Here data is passing along with a function in
              bind method-->
         $(document).ready(function() {
             $("p").bind("click", {
                 msg: "You just clicked the paragraph!"
             }, handlerName)
         });
     </ script >
     < style >
         p {
             display: block;
             padding: 50px;
             width: 280px;
             border: 2px solid green;
         }
     </ style >
</ head >
  
< body >
     <!--A pop will appear after clicking on this paragraph-->
     < p >Click me!</ p >
</ body >
  
</ html >

输出如下：

在点击"点击我"框之前,

点击"点击我"框后,

---