mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-29 13:04:32 +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> |