mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-08 15:04:05 +08:00
482 lines
36 KiB
HTML
482 lines
36 KiB
HTML
<article class="" id="post-">
|
||
<header class="entry-header">
|
||
<h1 class="entry-title">.bind()</h1>
|
||
<div class="entry-meta">
|
||
所属分类:<span class="category"><a href="/category/events/">事件</a> > <a href="/category/events/event-handler-attachment/">绑定事件处理器</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/deprecated/">弃用</a> > <a href="/category/deprecated/deprecated-3.0/">3.0 版本弃用的 API</a></span>
|
||
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/bind/" target="_blank">.bind()</a></span>
|
||
</div><!-- .entry-meta -->
|
||
</header><!-- .entry-header -->
|
||
<!-- .entry-header -->
|
||
<div class="entry-content">
|
||
<article class="entry method" id="bind1"><h2 class="section-title">
|
||
<span class="name">.bind( eventType [, eventData ], handler(eventObject) )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
|
||
</h2>
|
||
<div class="entry-wrapper">
|
||
<p class="desc"><strong>描述: </strong>为一个元素绑定一个事件处理程序。</p>
|
||
<ul class="signatures">
|
||
<li class="signature" id="bind-eventType-eventData-handlereventObject">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.bind( eventType [, eventData ], handler(eventObject) )</h4>
|
||
<ul>
|
||
<li>
|
||
<div><strong>eventType</strong></div>
|
||
<div>类型: <a href="/Types/#String">String</a>
|
||
</div>
|
||
<div>一个包含一个或多个DOM事件类型的字符串,比如"click"或"submit,"或自定义事件的名称。</div>
|
||
</li>
|
||
<li>
|
||
<div><strong>eventData</strong></div>
|
||
<div>类型: <a href="/Types/#Object">Object</a>
|
||
</div>
|
||
<div>一个对象,它包含的数据键值对映射将被传递给事件处理程序。</div>
|
||
</li>
|
||
<li>
|
||
<div><strong>handler(eventObject)</strong></div>
|
||
<div>类型: <a href="/Types/#Function">Function</a>()</div>
|
||
<div>每当事件触发时执行的函数。</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="signature" id="bind-eventType-eventData-preventBubble">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.4.3/">1.4.3</a></span>.bind( eventType [, eventData ], preventBubble )</h4>
|
||
<ul>
|
||
<li>
|
||
<div><strong>eventType</strong></div>
|
||
<div>类型: <a href="/Types/#String">String</a>
|
||
</div>
|
||
<div>一个包含一个或多个DOM事件类型的字符串,比如"click"或"submit,"或自定义事件的名称。</div>
|
||
</li>
|
||
<li>
|
||
<div><strong>eventData</strong></div>
|
||
<div>类型: <a href="/Types/#Object">Object</a>
|
||
</div>
|
||
<div>一个对象,它包含的数据键值对映射将被传递给事件处理程序。</div>
|
||
</li>
|
||
<li>
|
||
<div><strong>preventBubble</strong></div>
|
||
<div>类型: <a href="/Types/#Boolean">Boolean</a>
|
||
</div>
|
||
<div>第三个参数设置为false将绑定一个函数,防止默认事件,阻止事件冒泡。默认值是true。</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="signature" id="bind-events">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>.bind( events )</h4>
|
||
<ul><li>
|
||
<div><strong>events</strong></div>
|
||
<div>类型: <a href="/Types/#Object">Object</a>
|
||
</div>
|
||
<div>一个对象,包含一个或多个DOM事件类型和函数并执行它们。</div>
|
||
</li></ul>
|
||
</li>
|
||
</ul>
|
||
<div class="longdesc" id="entry-longdesc">
|
||
<p>
|
||
从jQuery 1.7开始,<a href="/on"><code>.on()</code></a> 方法是将事件处理程序绑定到文档(document)的首选方法。对于早期版本,<code>.bind()</code>方法用于直接附加一个事件处理程序到元素上。处理程序附加到jQuery对象中当前选中的元素,所以,在<code>.bind()</code>绑定事件的时候,这些元素必须已经存在。对于更为灵活的事件绑定,可以查看<a href="/on"><code>.on()</code></a> 或者 <a href="/delegate"><code>.delegate()</code></a>事件代理。</p>
|
||
<p>对于<code>eventType</code>任何字符串是合法的;如果该字符串不是一个原生的DOM事件名称,那么以自定义事件方式绑定处理程序。这些事件是不会被浏览器调用,但可以通过其他JavaScript代码,例如使用<code>.trigger()</code>或<code>.triggerHandler()</code> 来手动触发。</p>
|
||
<p>如果<code>eventType</code>参数字符串包含一个点( <code>.</code> )字符,那么该事件是带命名空间的。这个点( <code>.</code> )字符将事件及其命名空间分隔开来。例如,在调用<code>.bind('click.name', handler)</code> ,字符串<code>click</code>是事件类型,而字符串<code>name</code>是命名空间。命名空间允许我们解除或绑定一些事件,而不会影响其他事件(注:即使是同类型的事件,命名空间不同,就不会受到影响。)。见<code>.unbind()</code>获取更多信息。</p>
|
||
<p>
|
||
有一些标准的浏览器事件的简写方法,比如 <a href="/click"><code>.click()</code></a>可以使用附加或触发事件处理程序。简写方法的完整列表,请参阅<a href="/category/events/">events category</a>。</p>
|
||
<p>注:jQuery库提供了标准的事件类型绑定快捷方法,比如<code>.bind('click')</code>的快捷方法<code>.click()</code>。每一个描述中可以找到它的快捷方式:<a href="/blur">blur</a>, <a href="/focus">focus</a>, <a href="/focusin">focusin</a>, <a href="/focusout">focusout</a>, <a href="/load-event">load</a>, <a href="/resize">resize</a>, <a href="/scroll">scroll</a>, <a href="/unload">unload</a>, <a href="/click">click</a>, <a href="/dblclick">dblclick</a>, <a href="/mousedown">mousedown</a>, <a href="/mouseup">mouseup</a>, <a href="/mousemove">mousemove</a>, <a href="/mouseover">mouseover</a>, <a href="/mouseout">mouseout</a>, <a href="/mouseenter">mouseenter</a>, <a href="/mouseleave">mouseleave</a>, <a href="/change">change</a>, <a href="/select">select</a>, <a href="/submit">submit</a>, <a href="/keydown">keydown</a>, <a href="/keypress">keypress</a>, <a href="/keyup">keyup</a>, <a href="/error">error</a>。</p>
|
||
<p>当事件到达一个元素,该元素上绑定的所有与之相对应的类型的事件都会被触发。如果该元素上有多个处理程序注册,他们将永远在其中按固定的次序执行。所有处理程序执行完成后,事件继续沿着正常的事件传播路径继续传播事件。</p>
|
||
<p><code>.bind()</code>一个基本的用法:</p>
|
||
<div class="syntaxhighlighter javascript nogutter">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code>$(<span class="string">'#foo'</span>).bind(<span class="string">'click'</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> alert(<span class="string">'User clicked on "foo."'</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>此代码将使元素ID为<code>foo</code>响应<code>click</code>事件。当在用户点击这个元素之后,警报将显示。</p>
|
||
<h4 id="multiple-events">Multiple Events(多个事件)</h4>
|
||
<p>多个事件类型可以通过用空格隔开一次性绑定:</p>
|
||
<div class="syntaxhighlighter javascript nogutter">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code>$(<span class="string">'#foo'</span>).bind(<span class="string">'mouseenter mouseleave'</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).toggleClass(<span class="string">'entered'</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>在<code><div id="foo"></code>(当最初它不会有"entered"样式类时)上的这个效果是当鼠标进入<code><div></code>时增加"entered"样式类,鼠标离开时移除这个样式类。 </p>
|
||
<p>在jQuery 1.4中,我们可以通过传递一个事件类型/处理函数的数据键值对映射来绑定多个事件处理程序,例如:</p>
|
||
<div class="syntaxhighlighter javascript nogutter">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code>$(<span class="string">'#foo'</span>).bind({</code></div></div><div class="container"><div class="line"><code> click: <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// do something on click</span></code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> mouseenter: <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// do something on mouseenter</span></code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<h4 id="event-handlers">Event Handlers(事件处理程序)</h4>
|
||
<p><code>handler</code>参数需要一个回调函数,如上所述。在处理函数中,
|
||
关键字 <code>this</code> 指向当前所处理的 DOM 元素。为了该元素在jQuery中使用,它可以通过正常的<code>$()</code>函数。例如:</p>
|
||
<div class="syntaxhighlighter javascript nogutter">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code>$(<span class="string">'#foo'</span>).bind(<span class="string">'click'</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> alert($(<span class="keyword">this</span>).text());</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>执行此代码后,当用户点击里面ID为<code>foo</code>的元素 ,它的文本内容将被显示为警告。</p>
|
||
<p>在jQuery 1.4.2中,重复的事件处理程序可以绑定到一个元素,而不是被丢弃。这对于使用 event data 功能时,或者是当其它唯一的数据保存在事件处理函数的闭包中时,特别有用。</p>
|
||
<p>
|
||
在jQuery1.4.3,您现在可以通过传递<code>false</code>代替一个事件处理程序。这将相当于一个事件处理程序绑定写成这样:<code>function(){ return false; }</code>。在以后通过调用<code>.unbind( eventName, false )</code>来移除这个函数。</p>
|
||
<h4 id="event-object">
|
||
<a href="/category/events/event-object/">The Event object(事件对象)</a>
|
||
</h4>
|
||
<p>在<code>handler</code>回调函数里还可以带参数。当函数被调用时,事件对象(event)将作为第一个参数被传递。</p>
|
||
<p>事件对象往往是不必要的,可以省略的参数,这是因为当触发事件处理时,我们可以通过上下文来取得足够的信息,完成我们需要的操作。然而,有的时候,当事件初始化完成时,我们需要收集更多关于用户环境的信息时,我们就需要使用该参数了。<a href="/category/events/event-object/">查看所有的事件对象</a>。</p>
|
||
<p>从一个处理函数返回<code>false</code>等效于调用事件对象中的<code>.preventDefault()</code>和<code>.stopPropagation()</code>。</p>
|
||
<p>使用处理程序中的事件对象看起来像这样:</p>
|
||
<div class="syntaxhighlighter javascript nogutter">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code>$(document).ready(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $(<span class="string">'#foo'</span>).bind(<span class="string">'click'</span>, <span class="keyword">function</span>(event) {</code></div></div><div class="container"><div class="line"><code> alert(<span class="string">'The mouse cursor is at ('</span></code></div></div><div class="container"><div class="line"><code> + event.pageX + <span class="string">', '</span> + event.pageY + <span class="string">')'</span>);</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>请注意,参数添加到匿名函数。此代码将使 在点击ID为<code>foo</code>的元素的时候 alert光标在页面上的坐标位置。</p>
|
||
<h4 id="passing-event-data">Passing Event Data(传递事件数据)</h4>
|
||
<p>可选的<code>eventData</code>参数不常用。当提供时,这种参数允许我们给处理函数传递额外的信息。一个方便的使用这个参数来解决由于闭包造成的问题。例如,假设我们有两个事件处理函数都引用了相同的外部变量:</p>
|
||
<div class="syntaxhighlighter javascript nogutter">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> message = <span class="string">'Spoon!'</span>;</code></div></div><div class="container"><div class="line"><code>$(<span class="string">'#foo'</span>).bind(<span class="string">'click'</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> alert(message);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>message = <span class="string">'Not in the face!'</span>;</code></div></div><div class="container"><div class="line"><code>$(<span class="string">'#bar'</span>).bind(<span class="string">'click'</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> alert(message);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>由于两个事件处理函数的闭包中,都引用了 <code>message</code>,所以,当事件被触发时,这两个事件处理都会显示 <span class="output">Not in the face!</span>,因为变量的值已经改变了。为了避免这个问题,我们可以使用 <code>eventData</code> 来传递信息:
|
||
</p>
|
||
<div class="syntaxhighlighter javascript nogutter">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> message = <span class="string">'Spoon!'</span>;</code></div></div><div class="container"><div class="line"><code>$(<span class="string">'#foo'</span>).bind(<span class="string">'click'</span>, {msg: message}, <span class="keyword">function</span>(event) {</code></div></div><div class="container"><div class="line"><code> alert(event.data.msg);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>message = <span class="string">'Not in the face!'</span>;</code></div></div><div class="container"><div class="line"><code>$(<span class="string">'#bar'</span>).bind(<span class="string">'click'</span>, {msg: message}, <span class="keyword">function</span>(event) {</code></div></div><div class="container"><div class="line"><code> alert(event.data.msg);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>这一次该变量没有提供给处理函数;相反,变量通过<em>值</em>传递给<code>eventData</code> ,所以就可以在事件绑定的时候进行赋值操作。
|
||
第一个处理程序,现在将显示<span class="output">Spoon!</span>而第二个会提醒<span class="output">Not in the face!</span>。
|
||
</p>
|
||
<blockquote>
|
||
<p>请注意,对象是通过<em>参数</em>传递给函数的,这种情况进一步复杂化。</p>
|
||
</blockquote>
|
||
<p>如果<code>eventData</code>参数存在,那么第二个传递给<code>.bind()</code>的参数;如果没有更多的数据需要发送到处理程序,那么回调函数传递作为第二个也就是最后一个参数。</p>
|
||
<blockquote><p>见<code>.trigger()</code>方法来了解如何在事件发生时向事件处理函数中传入参数,而不是在事件绑定的时候传递数据。</p></blockquote>
|
||
<p>从 jQuery 1.4 开始,我们再也不能附加数据(和事件)到对象,embed,或applet元素了,
|
||
因为当附加数据到Java的applet时会发生严重错误。</p>
|
||
<p><strong>注意: </strong>
|
||
虽然表现在下面的例子中,
|
||
绑定 <code>click</code> 和<code>dblClick</code>事件处理程序到相同的元素,这是不可取的。
|
||
各个浏览器事件触发的顺序是不同的, 一些浏览器在<code>dblclick</code>之前接受两个 <code>click</code> 事件 ,而和其它浏览器只接受一个 <code>click</code> 事件。
|
||
用户往往可通过不同的操作系统和浏览器配置双击灵敏度(
|
||
点击之间的最大时间被检测为双击)。
|
||
</p>
|
||
</div>
|
||
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
|
||
<h4>Example: <span class="desc">为段落标签绑定单击和双击事件。请注意:坐标是相对于窗口的,所以在这个例子中是相对于 iframe 的。</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter xml ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
<div class="line n9">9</div>
|
||
<div class="line n10">10</div>
|
||
<div class="line n11">11</div>
|
||
<div class="line n12">12</div>
|
||
<div class="line n13">13</div>
|
||
<div class="line n14">14</div>
|
||
<div class="line n15">15</div>
|
||
<div class="line n16">16</div>
|
||
<div class="line n17">17</div>
|
||
<div class="line n18">18</div>
|
||
<div class="line n19">19</div>
|
||
<div class="line n20">20</div>
|
||
<div class="line n21">21</div>
|
||
<div class="line n22">22</div>
|
||
<div class="line n23">23</div>
|
||
<div class="line n24">24</div>
|
||
<div class="line n25">25</div>
|
||
<div class="line n26">26</div>
|
||
<div class="line n27">27</div>
|
||
<div class="line n28">28</div>
|
||
<div class="line n29">29</div>
|
||
<div class="line n30">30</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="doctype"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code><span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value">yellow;</span></span> <span class="rule"><span class="attribute">font-weight</span>:<span class="value">bold;</span></span> <span class="rule"><span class="attribute">cursor</span>:<span class="value">pointer;</span></span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">5</span>px;</span></span> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag">p</span><span class="class">.over</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#ccc</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">span</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">p</span>></span>Click or double click here.<span class="tag"></<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">span</span>></span><span class="tag"></<span class="title">span</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).bind(<span class="string">"click"</span>, <span class="keyword">function</span>(event){</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> str = <span class="string">"( "</span> + event.pageX + <span class="string">", "</span> + event.pageY + <span class="string">" )"</span>;</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"span"</span>).text(<span class="string">"Click happened! "</span> + str);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).bind(<span class="string">"dblclick"</span>, <span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"span"</span>).text(<span class="string">"Double-click happened in "</span> + <span class="keyword">this</span>.nodeName);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).bind(<span class="string">"mouseenter mouseleave"</span>, <span class="keyword">function</span>(event){</code></div></div><div class="container"><div class="line"><code>$(<span class="keyword">this</span>).toggleClass(<span class="string">"over"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<h4>Demo:</h4>
|
||
<div class="demo code-demo"></div>
|
||
</div>
|
||
<div class="entry-example" id="example-1">
|
||
<h4>Example: <span class="desc">点击段落时,显示其中的内容:</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter javascript ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).bind(<span class="string">"click"</span>, <span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>alert( $(<span class="keyword">this</span>).text() );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="entry-example" id="example-2">
|
||
<h4>Example: <span class="desc">在事件处理之前,你可以传入一些额外的数据:</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter javascript ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="function"><span class="keyword">function</span> <span class="title">handler</span><span class="params">(event)</span> {</span></code></div></div><div class="container"><div class="line"><code>alert(event.data.foo);</code></div></div><div class="container"><div class="line"><code>}</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).bind(<span class="string">"click"</span>, {foo: <span class="string">"bar"</span>}, handler)</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="entry-example" id="example-3">
|
||
<h4>Example: <span class="desc">通过返回 <code>false</code> 的方式取消默认的动作,并防止它进行事件冒泡: </span>
|
||
</h4>
|
||
<div class="syntaxhighlighter javascript ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code>$(<span class="string">"form"</span>).bind(<span class="string">"submit"</span>, <span class="keyword">function</span>() { <span class="keyword">return</span> <span class="literal">false</span>; })</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="entry-example" id="example-4">
|
||
<h4>Example: <span class="desc">通过使用 .preventDefault() 方法,仅取消默认的动作。</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter javascript ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code>$(<span class="string">"form"</span>).bind(<span class="string">"submit"</span>, <span class="keyword">function</span>(event) {</code></div></div><div class="container"><div class="line"><code>event.preventDefault();</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="entry-example" id="example-5">
|
||
<h4>Example: <span class="desc">通过使用 .stopPropagation() 方法,防止事件冒泡,但是默认执行默认的动作。</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter javascript ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code>$(<span class="string">"form"</span>).bind(<span class="string">"submit"</span>, <span class="keyword">function</span>(event) {</code></div></div><div class="container"><div class="line"><code> event.stopPropagation();</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="entry-example" id="example-6">
|
||
<h4>Example: <span class="desc">绑定自定义事件。</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter xml ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
<div class="line n9">9</div>
|
||
<div class="line n10">10</div>
|
||
<div class="line n11">11</div>
|
||
<div class="line n12">12</div>
|
||
<div class="line n13">13</div>
|
||
<div class="line n14">14</div>
|
||
<div class="line n15">15</div>
|
||
<div class="line n16">16</div>
|
||
<div class="line n17">17</div>
|
||
<div class="line n18">18</div>
|
||
<div class="line n19">19</div>
|
||
<div class="line n20">20</div>
|
||
<div class="line n21">21</div>
|
||
<div class="line n22">22</div>
|
||
<div class="line n23">23</div>
|
||
<div class="line n24">24</div>
|
||
<div class="line n25">25</div>
|
||
<div class="line n26">26</div>
|
||
<div class="line n27">27</div>
|
||
<div class="line n28">28</div>
|
||
<div class="line n29">29</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="doctype"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code><span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">span</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">blue;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">p</span>></span>Has an attached custom event.<span class="tag"></<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">button</span>></span>Trigger custom event<span class="tag"></<span class="title">button</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">span</span> <span class="attribute">style</span>=<span class="value">"display:none;"</span>></span><span class="tag"></<span class="title">span</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).bind(<span class="string">"myCustomEvent"</span>, <span class="keyword">function</span>(e, myName, myValue){</code></div></div><div class="container"><div class="line"><code>$(<span class="keyword">this</span>).text(myName + <span class="string">", hi there!"</span>);</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"span"</span>).stop().css(<span class="string">"opacity"</span>, <span class="number">1</span>)</code></div></div><div class="container"><div class="line"><code>.text(<span class="string">"myName = "</span> + myName)</code></div></div><div class="container"><div class="line"><code>.fadeIn(<span class="number">30</span>).fadeOut(<span class="number">1000</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"button"</span>).click(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).trigger(<span class="string">"myCustomEvent"</span>, [ <span class="string">"John"</span> ]);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<h4>Demo:</h4>
|
||
<div class="demo code-demo"></div>
|
||
</div>
|
||
<div class="entry-example" id="example-7">
|
||
<h4>Example: <span class="desc">同时绑定多个事件。</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter javascript ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
<div class="line n9">9</div>
|
||
<div class="line n10">10</div>
|
||
<div class="line n11">11</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code>$(<span class="string">"div.test"</span>).bind({</code></div></div><div class="container"><div class="line"><code> click: <span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).addClass(<span class="string">"active"</span>);</code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> mouseenter: <span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).addClass(<span class="string">"inside"</span>);</code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> mouseleave: <span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).removeClass(<span class="string">"inside"</span>);</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div></section>
|
||
</div></article> </div>
|
||
</article> |