Detailed explanation of bind() function in jQuery

<span style='font-size: 14px; font-family: 微软雅黑, "Microsoft YaHei";'> I believe that many friends who have come into contact with jQuery are familiar with the bind() function, but many friends are still not very clear about the meaning and use of bind(), bind()</span> The function is used to bind one or more events for each matching element. Event processing function. Today we will introduce you to the detailed explanation of the bind() function in jQuery!

In addition, you can also pass some additional required data to the event handling function.

When bind() is executed, the event handler function will be bound to each matching element. Therefore, you use bind() to bind click events to all button elements. This is to bind click events to each button element that exists in the document at that time. If you later add a new button element to the document, the bound event will not take effect on it. If you want the binding event to also take effect on newly added elements in the future, please use event functions such as on(), delegate(), live() (try to use the earlier event functions first).

In addition, you can bind multiple event handlers to the same element and the same event type. When an event is triggered, jQuery will execute the bound event processing functions in the order of binding.

To delete an event bound via bind(), use the unbind() function.

This function belongs to the jQuery object (instance).

Grammar

bind()The function mainly has the following two forms of usage:

Usage 1:

jQueryObject.bind( events [, data ], handler )

Usage 2: jQuery 1.4.3 newly supports this usage.

jQueryObject.bind( events [, data ] [, isDefaultBubble ] )

Usage three: jQuery 1.4 newly supports this usage.

jQueryObject.bind( eventsMap )

Parameters

Parameters	Description
events	String type one or more event types separated by spaces and optional namespace, such as "click", "focus click", "keydown.myPlugin".
data	Optional/any type When an event is triggered, any data needs to be passed to the event processing function through event.data.
handler	Event handling function specified by Function type.
isDefaultBubble	Optional/Boolean type specifies whether to allow the element's default behavior and event bubbling when an event is triggered. Default is true.
eventsMap	Object type is an Object object, each of its properties corresponds to the event type and optional namespace (Parameter events), the attribute value corresponds to the bound event processing function (Parameter handler).

关于参数events中可选的命名空间(1.4.3+才支持)，请参考最下面的示例代码。

参数handler中的this指向当前DOM元素。bind()还会为handler传入一个参数：表示当前事件的Event对象。

参数handler的返回值与DOM原生事件的处理函数返回值作用一致。例如submit(表单提交)事件的事件处理函数返回false，可以阻止表单的提交。

参数isDefaultBubble用于指示是否允许元素的默认行为和事件冒泡。如果该值为false，它将阻止元素的默认行为(例如：触发click事件的链接的默认跳转行为，触发submit事件的表单的默认提交行为)和事件的冒泡传递。

返回值

bind()函数的返回值为jQuery类型，返回当前jQuery对象本身。

示例&说明

以点击事件("click")为例，以下是jQuery中事件函数的常规用法(某些函数也存在其它形式的用法，此处暂不列出)：

<span class="com">// 这里的选择器selector用于指定可以触发事件的元素<span class="pln"><br/>// 这里的选择器ancestor应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"委托代理"的形式触发事件。<span class="pln"><br/><br/>// jQuery 1.0+ (1.4.3+支持参数data)<span class="pln"><br/>$<span class="pun">(<span class="str">"selector"<span class="pun">).<span class="pln">click<span class="pun">(<span class="pln"> <span class="pun">[<span class="pln"> data <span class="pun">,]<span class="pln"> handler <span class="pun">);<span class="pln"><br/><br/>// jQuery 1.0+ (1.4.3+支持参数data)<span class="pln"><br/>$<span class="pun">(<span class="str">"selector"<span class="pun">).<span class="pln">bind<span class="pun">(<span class="pln"> <span class="str">"click"<span class="pln"> <span class="pun">[,<span class="pln"> data <span class="pun">],<span class="pln"> handler <span class="pun">);<span class="pln"><br/><br/>// jQuery 1.3+ (1.4+支持参数data)<span class="pln"><br/>$<span class="pun">(<span class="str">"selector"<span class="pun">).<span class="pln">live<span class="pun">(<span class="pln"> <span class="str">"click"<span class="pln"> <span class="pun">[,<span class="pln"> data <span class="pun">],<span class="pln"> handler <span class="pun">);<span class="pln"><br/><br/>// jQuery 1.4.2+<span class="pln"><br/>$<span class="pun">(<span class="str">"ancestor"<span class="pun">).<span class="pln">delegate<span class="pun">(<span class="pln"> <span class="str">"selector"<span class="pun">,<span class="pln"> <span class="str">"click"<span class="pln"> <span class="pun">[,<span class="pln"> data <span class="pun">],<span class="pln"> handler <span class="pun">);<span class="pln"><br/><br/>// jQuery 1.7+<span class="pln"><br/>$<span class="pun">(<span class="str">"ancestor"<span class="pun">).<span class="pln">on<span class="pun">(<span class="pln"> <span class="str">"click"<span class="pun">,<span class="pln"> <span class="str">"selector"<span class="pln"> <span class="pun">[,<span class="pln"> data <span class="pun">],<span class="pln"> handler <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

请参考下面这段初始HTML代码：

<span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span><span class="pln">CodePlayer<span class="tag"></span></p><span class="pln"><br/>    <span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span><span class="pln">专注于编程开发技术分享<span class="tag"></span></p><span class="pln"><br/>    <span class="tag"><em<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="tag">><span class="pln">http://www.365mini.com<span class="tag"></em><span class="pln"><br/></p><span class="pln"><br/><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">Google<span class="tag"></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

我们为

中的所有

元素绑定点击事件：

<span class="com">//为p中的所有p元素的click事件绑定事件处理函数<span class="pln"><br/>//只有n2、n3可以触发该事件<span class="pln"><br/>$<span class="pun">(<span class="str">"p p"<span class="pun">).<span class="pln">bind<span class="pun">(<span class="str">"click"<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(){<span class="pln"><br/>// 这里的this指向触发点击事件的p元素(Element)<span class="pln"><br/>    alert<span class="pun">(<span class="pln"> $<span class="pun">(<span class="kwd">this<span class="pun">).<span class="pln">text<span class="pun">()<span class="pln"> <span class="pun">);<span class="pln"><br/>});</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

运行代码(以下代码请自行复制到演示页面运行)

此外，我们还可以同时绑定多个事件，并为事件处理函数传递一些附加的数据，我们可以通过jQuery为事件处理函数传入的参数event(Event事件对象)来进行处理：

<span class="kwd">var<span class="pln"> obj <span class="pun">=<span class="pln"> <span class="pun">{<span class="pln"> id<span class="pun">:<span class="pln"> <span class="lit">5<span class="pun">,<span class="pln"> name<span class="pun">:<span class="pln"> <span class="str">"王五"<span class="pln"> <span class="pun">};<span class="pln"><br/><br/>//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据obj<span class="pln"><br/>// 附加数据可以是任意类型<span class="pln"><br/>$<span class="pun">(<span class="str">"#n5"<span class="pun">).<span class="pln">bind<span class="pun">(<span class="str">"mouseenter mouseleave"<span class="pun">,<span class="pln"> obj<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/>    <span class="kwd">var<span class="pln"> $me <span class="pun">=<span class="pln"> $<span class="pun">(<span class="kwd">this<span class="pun">);<span class="pln"><br/>    <span class="kwd">var<span class="pln"> obj <span class="pun">=<span class="pln"> event<span class="pun">.<span class="pln">data<span class="pun">;<span class="pln"> <span class="com">// 这就是传入的附加数据<span class="pln"><br/>    <span class="kwd">if<span class="pun">(<span class="pln"> event<span class="pun">.<span class="pln">type <span class="pun">==<span class="pln"> <span class="str">"mouseenter"<span class="pun">){<span class="pln"><br/>        $me<span class="pun">.<span class="pln">html<span class="pun">(<span class="pln"> <span class="str">"你好，"<span class="pln"> <span class="pun">+<span class="pln"> obj<span class="pun">.<span class="pln">name <span class="pun">+<span class="pln"> <span class="str">"!"<span class="pun">);<span class="pln"><br/>    <span class="pun">}<span class="kwd">else<span class="pln"> <span class="kwd">if<span class="pun">(<span class="pln">event<span class="pun">.<span class="pln">type <span class="pun">==<span class="pln"> <span class="str">"mouseleave"<span class="pln"> <span class="pun">){<span class="pln"><br/>        $me<span class="pun">.<span class="pln">html<span class="pun">(<span class="pln"> <span class="str">"再见，"<span class="pln"> <span class="pun">+<span class="pln"> obj<span class="pun">.<span class="pln">name <span class="pun">+<span class="pln"> <span class="str">"!"<span class="pun">);<span class="pln">      <br/>    <span class="pun">}<span class="pln">           <br/><span class="pun">}<span class="pln"> <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

此外，如果符合条件的元素是bind()函数执行后新添加的，绑定事件不会对其生效。同样以初始HTML代码为例，我们可以编写如下jQuery代码：

<span class="com">//为p中的所有p元素的click事件绑定事件处理函数<span class="pln"><br/>//只有n2、n3可以触发该事件<span class="pln"><br/>$<span class="pun">(<span class="str">"p p"<span class="pun">).<span class="pln">bind<span class="pun">(<span class="str">"click"<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/>    alert<span class="pun">(<span class="pln"> $<span class="pun">(<span class="kwd">this<span class="pun">).<span class="pln">text<span class="pun">()<span class="pln"> <span class="pun">);<span class="pln"><br/>});<span class="pln"><br/><br/>// 新添加的n6不会触发上述click事件<span class="pln"><br/>$<span class="pun">(<span class="str">"#n1"<span class="pun">).<span class="pln">append<span class="pun">(<span class="str">&#39;<p id="n6">上述绑定的click事件不会对该元素也生效!</p>&#39;<span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

参数events还支持为事件类型附加额外的命名空间。当为同一元素绑定多个相同类型的事件处理函数时。使用命名空间，可以在触发事件、移除事件时限定触发或移除的范围。

<span class="kwd">function<span class="pln"> clickHandler<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/>    alert<span class="pun">(<span class="pln"> <span class="str">"触发时的命名空间:["<span class="pln"> <span class="pun">+<span class="pln"> event<span class="pun">.<span class="pln">namespace <span class="pun">+<span class="pln"> <span class="str">"]"<span class="pun">);<span class="pln"><br/>}<span class="pln"><br/><br/>var<span class="pln"> $p <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"p"<span class="pun">);<span class="pln"><br/><br/>// A：为所有p元素绑定click事件，定义在foo和bar两个命名空间下<span class="pln"><br/>$p<span class="pun">.<span class="pln">bind<span class="pun">(<span class="pln"> <span class="str">"click.foo.bar"<span class="pun">,<span class="pln"> clickHandler <span class="pun">);<span class="pln"><br/><br/>// B：为所有p元素绑定click事件，定义在test命名空间下<span class="pln"><br/>$p<span class="pun">.<span class="pln">bind<span class="pun">(<span class="pln"> <span class="str">"click.test"<span class="pun">,<span class="pln"> clickHandler <span class="pun">);<span class="pln"><br/><br/>var<span class="pln"> $n2 <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"#n2"<span class="pun">);<span class="pln"><br/><br/>// 触发所有click事件<span class="pln"><br/>$n2<span class="pun">.<span class="pln">trigger<span class="pun">(<span class="str">"click"<span class="pun">);<span class="pln"> <span class="com">// 触发A和B (event.namespace = "")<span class="pln"><br/><br/>// 触发定义在foo命名空间下的click事件<span class="pln"><br/>$n2<span class="pun">.<span class="pln">trigger<span class="pun">(<span class="str">"click.foo"<span class="pun">);<span class="pln"> <span class="com">// 触发A (event.namespace = "foo")<span class="pln"><br/>// 触发定义在bar命名空间下的click事件<span class="pln"><br/>$n2<span class="pun">.<span class="pln">trigger<span class="pun">(<span class="str">"click.bar"<span class="pun">);<span class="pln"> <span class="com">// 触发A (event.namespace = "bar")<span class="pln"><br/>// 触发同时定义在foo和bar两个命名空间下的click事件<span class="pln"><br/>$n2<span class="pun">.<span class="pln">trigger<span class="pun">(<span class="str">"click.foo.bar"<span class="pun">);<span class="pln"> <span class="com">// 触发A (event.namespace = "bar.foo")<span class="pln"><br/><br/>// 触发定义在test命名空间下的click事件<span class="pln"><br/>$n2<span class="pun">.<span class="pln">trigger<span class="pun">(<span class="str">"click.test"<span class="pun">);<span class="pln"> <span class="com">// 触发B (event.namespace = "test")</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

bind()函数的参数eventsMap是一个对象，可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下：

var eventsMap = {
    "mouseenter": function(event){
        $(this).html( "Hello!");        
    },
    
    "mouseleave": function(event){
        $(this).html( "Bye!");
    }
};

//为n5绑定mouseenter mouseleave两个事件
$("#n5").bind( eventsMap );

总结：

本文使用示例代码详细的为大家分析了jQuery中关于bind()函数，相信大家对此也是有了进一步的了解，希望对你的工作有所帮助！

相关推荐：

Js的this指向 apply().call(),bind()的问题

带你了解JQuery中绑定事件（bind()）和移除事件（unbind()）

jQuery中 trigger() & bind() 使用心得

带你深入了解JQuery中Bind()函数

The above is the detailed content of Detailed explanation of bind() function in jQuery. For more information, please follow other related articles on the PHP Chinese website!