mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-08 15:04:05 +08:00
452 lines
42 KiB
HTML
452 lines
42 KiB
HTML
<article class="" id="post-">
|
||
<header class="entry-header">
|
||
<h1 class="entry-title">.on()</h1>
|
||
<div class="entry-meta">
|
||
所属分类：<span class="category"><a href="/category/events/">事件</a> > <a href="/category/events/event-handler-attachment/">绑定事件处理器</a></span>
|
||
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/on/" target="_blank">.on()</a></span>
|
||
</div><!-- .entry-meta -->
|
||
</header><!-- .entry-header -->
|
||
<!-- .entry-header -->
|
||
<div class="entry-content">
|
||
<article class="entry method" id="on1"><h2 class="section-title">
|
||
<span class="name">.on( events [, selector ] [, data ], 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="on-events-selector-data-handlereventObject">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.7/">1.7</a></span>.on( events [, selector ] [, data ], handler(eventObject) )</h4>
|
||
<ul>
|
||
<li>
|
||
<div><strong>events</strong></div>
|
||
<div>类型: <a href="/Types/#String">String</a>
|
||
</div>
|
||
<div>一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。</div>
|
||
</li>
|
||
<li>
|
||
<div><strong>selector</strong></div>
|
||
<div>类型: <a href="/Types/#String">String</a>
|
||
</div>
|
||
<div>一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 <code>null</code> 或者忽略了该选择器，那么被选中的元素总是能触发事件。</div>
|
||
</li>
|
||
<li>
|
||
<div><strong>data</strong></div>
|
||
<div>类型: <a href="/Types/#Anything">Anything</a>
|
||
</div>
|
||
<div>当一个事件被触发时，要传递给事件处理函数的<a href="/event.data"><code>event.data</code></a>。</div>
|
||
</li>
|
||
<li>
|
||
<div><strong>handler(eventObject)</strong></div>
|
||
<div>类型: <a href="/Types/#Function">Function</a>()</div>
|
||
<div>事件被触发时，执行的函数。若该函数只是要执行<code>return false</code>的话，那么该参数位置可以直接简写成 <code>false</code>。 </div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="signature" id="on-events-selector-data">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.7/">1.7</a></span>.on( events [, selector ] [, data ] )</h4>
|
||
<ul>
|
||
<li>
|
||
<div><strong>events</strong></div>
|
||
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
|
||
</div>
|
||
<div>一个对象，键是由一个或多个由空格分隔的事件类型及可选的名字空间，值是这些事件类型所对应的事件处理函数。</div>
|
||
</li>
|
||
<li>
|
||
<div><strong>selector</strong></div>
|
||
<div>类型: <a href="/Types/#String">String</a>
|
||
</div>
|
||
<div>一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 <code>null</code> 或者忽略了该选择器，那么被选中的元素总是能触发事件。</div>
|
||
</li>
|
||
<li>
|
||
<div><strong>data</strong></div>
|
||
<div>类型: <a href="/Types/#Anything">Anything</a>
|
||
</div>
|
||
<div>当一个事件被触发时，要传递给事件处理函数的<a href="/event.data"><code>event.data</code></a>。</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<div class="longdesc" id="entry-longdesc">
|
||
<p><code>.on()</code>方法事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，<code>.on()</code>方法 提供绑定事件处理的所有功能。为了帮助从旧的jQuery事件方法转换过来，查看 <a href="/bind"><code>.bind()</code></a>, <a href="/delegate"><code>.delegate()</code></a>, 和 <a href="/live"><code>.live()</code></a>. 要删除的<code>.on()</code>绑定的事件，请参阅<a href="/off"><code>.off()</code></a>。要绑定一个事件，并且只运行一次，然后删除自己， 请参阅<a href="/one"><code>.one()</code></a></p>
|
||
<h2 id="event-names">Event names and namespaces（事件名称和命名空间）</h2>
|
||
<p>任何事件的名称，可以作为<code>events</code> 参数。jQuery将通过所有浏览器的标准JavaScript事件类型，当用户操作事件，如<code>click</code>，浏览器会调用<code>handler</code>参数的函数。此外，<a href="/trigger"><code>.trigger()</code></a>方法可以触发标准的浏览器事件 和 自定义事件名绑定的处理程序。</p>
|
||
<p>事件名称可以添加指定的<em>event namespaces（命名空间）</em> 来简化删除或触发事件。例如，<code>"click.myPlugin.simple"</code>为 click 事件同时定义了两个命名空间 myPlugin 和 simple。通过上述方法绑定的 click 事件处理，可以用<code>.off("click.myPlugin")</code> 或 <code>.off("click.simple")</code>删除绑定到相应元素的Click事件处理程序，而不会干扰其他绑定在该元素上的“click（点击）” 事件。命名空间类似CSS类，因为它们是不分层次的;只需要有一个名字相匹配即可。以下划线开头的名字空间是供 jQuery 使用的。</p>
|
||
<p>在<code>.on()</code>方法的第二种用法中，<code>events</code>参数是一个JavaScript对象或者键值对。键等同于<code>events</code>参数，用空格分隔的事件名称字符串和可选命名空间。每个键的值是一个函数（或<code>false</code> 的值），相当于 <code>handler</code> 参数，但是该值并不是方法中的最后一个参数。在其它方面，这两种形式在下面描述的内容中其行为都是相同的。如下所述。</p>
|
||
<h2 id="direct-and-delegated-events">Direct and delegated events（直接和委托的事件）</h2>
|
||
<p>大多数浏览器事件<em>冒泡</em>, 或者 <em>传播</em>，都是由内到外的，从在文档最深处的元素( <strong>事件目标 event target</strong>)开始， 一路传递到body和<code>document</code>元素。（注：事件冒泡简单的说就是，在冒泡路径上所有绑定了相同事件类型的元素上都会触发这些类型的事件。）在Internet Explorer 8和更低，一些事件，如<code>change</code> 和 <code>submit</code>本身不泡沫，但 jQuery 为了跨浏览器一致性， jQuery 在这些事件上模拟了冒泡行为。</p>
|
||
<p>如果省略<code>selector</code>或者是null，那么事件处理程序被称为<em>直接事件</em> 或者 <em>直接绑定事件</em> 。每次选中的元素触发事件时，就会执行处理程序，不管它直接绑定在元素上，还是从后代（内部）元素冒泡到该元素的</p>
|
||
<p>当提供<code>selector</code>参数时，事件处理程序是指为<em>委派</em> 事件（注：通常也有很多人叫它代理事件）。事件不会在直接绑定的元素上触发，但当<code>selector</code>参数选择器匹配到后代（内部元素）的时候，事件处理函数才会被触发。jQuery 会从 event target 开始向上层元素(例如，由最内层元素到最外层元素)开始冒泡，并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器，那么这些元素上的事件也会被触发。</p>
|
||
<p><strong>事件处理只能绑定在当前被选中的元素上;而且，在您的代码调用<code>.on()</code>的时候，他们必须在页面文档中已经存在。</strong>为了确保目前的元素可以被选择的（注：即，存在），最好是在 document 的 ready 事件中进行事件绑定。如果新的HTML被注入页面时，新的HTML放置到页面<em>后</em>，事件会绑定到匹配选择器（<code>selector</code>参数）的元素。或者，使用委派事件绑定事件处理程序，如下所述。</p>
|
||
<p>委托事件有一个优势，他们能在<em>后代元素</em>添加到文档后，可以处理这些事件。
|
||
|
||
在确保所选择的元素已经存在的情况下，进行事件绑定时，您可以使用委派的事件，以避免频繁的绑定事件及解除绑定事件。
|
||
|
||
例如，这个已经存在的元素可以是 Model-View-Controller（模型 - 视图 - 控制器）模式中 View（视图） 的一个容器元素，或<code>document</code>。如果想监视所有文档中的冒泡事件的话。在加载任何其它 HTML 之前，<code>document</code> 元素在 <code>head</code> 中就是有效的，所以您可以安全的在 <code>head</code> 中进行事件绑定，而不需要等待文档加载完。</p>
|
||
<p>除了可以给未创建的后代元素绑定事件外（即上面提到的优势），代理事件的另一个好处就是，当需要监视很多元素的时候，代理事件的开销更小。例如，在一个表格的 <code>tbody</code> 中含有 1,000 行，下面这个例子会为这 1,000 元素绑定事件：</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">"#dataTable tbody tr"</span>).on(<span class="string">"click"</span>, <span class="keyword">function</span>(event){</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>委派事件的方法只有一个元素的事件处理程序，tbody，并且事件只会向上冒泡一层（从被点击的<code>tr</code> 到 <code>tbody</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">"#dataTable tbody"</span>).on(<span class="string">"click"</span>, <span class="string">"tr"</span>, <span class="keyword">function</span>(event){</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><strong>注意:</strong> 委托事件不能用于SVG.</p>
|
||
<h2 id="event-handler">The event handler and its environment（事件处理程序和它的环境）</h2>
|
||
<p><code>handler</code>参数必须是一个函数（或<code>false</code>值，见下文），
|
||
除非你传递一个对象给<code>events</code>参数。
|
||
您可以提供一个匿名处理函数给<code>.on()</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>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="function"><span class="keyword">function</span> <span class="title">notify</span><span class="params">()</span> {</span> alert(<span class="string">"clicked"</span>); }</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"button"</span>).on(<span class="string">"click"</span>, notify);</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>当浏览器触发一个事件或其他JavaScript调用的jQuery的<code>.trigger()</code>方法，jQuery传递一个<a href="/event-object"><code>event object</code></a>给这个处理程序，它可以用来分析和改变事件的状态。这个对象是由浏览器提供一个数据的<em>标注化子集</em>;您需要浏览器自己的未经修改的原始 event 对象，您可以使用<code>event.originalEvent</code>得到。例如， <a href="/event.type"><code>event.type</code></a> 包含事件的名称（例如， "resize" ）和<a href="/event.target"><code>event.target</code></a>表示事件除非的最深元素（最内层）。</p>
|
||
<p>默认情况下，大多数事件的冒泡从最初的 event target（目标元素） 开始的，直到<code>document</code> 元素。每个元素都沿着DOM层级这条路，jQuery会调用任何匹配的已被绑定的事件处理程序。一个处理程序可以调用的<code>event.stopPropagation()</code>防止事件向上冒泡文档树（ 从而防止这些元素的处理程序运行）。任何绑定到当前元素上的其他处理程序都将运行，为了防止这种情况，可以调用<code>event.stopImmediatePropagation()</code>。（绑定在元素上的事件被调用的顺序和它们被绑定的顺序时一样的。 ）</p>
|
||
<p>类似地，一个处理程序可以调用的<code>event.preventDefault()</code>取消浏览器默认操作行为;例如，一个链接上有一个 默认的<code>click</code>事件。并非所有的浏览器事件的默认操作，并非所有的默认操作可以被取消。有关详细信息，请参阅<a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-types-list">W3C Events Specification</a></p>
|
||
<p>调用<code>event.stopPropagation()</code> 和 <code>event.preventDefault()</code>会从一个事件处理程序会自动返回<code>false</code>。也可以直接将 <code>false</code> 当作 <code>handler</code> 的参数，作为 <code>function(){ return false; }</code> 的简写形式。因此，下面的写法 <code>$("a.disabled").on("click", false); </code> 将会阻止所有含有 "disabled" 样式的链接的默认行为，并阻止该事件上的冒泡行为。 </p>
|
||
<p>当jQuery的调用处理程序时，<code>this</code>关键字指向的是当前正在执行事件的元素。对于直接事件而言，<code>this</code> 代表绑定事件的元素。对于代理事件而言，<code>this</code> 则代表了与 <code>selector</code> 相匹配的元素。(注意，如果事件是从后代元素冒泡上来的话，那么 <code>this</code> 就有可能不等于 <code>event.target</code>。)若要使用 jQuery 的相关方法，可以根据当前元素创建一个 jQuery 对象，即使用 <code>$(this)</code>。</p>
|
||
<h2 id="passing-data">Passing data to the handler（将数据传递到处理程序）</h2>
|
||
<p>如果<code>data</code>参数给<code>.on()</code>并且不是<code>null</code> 或者 <code>undefined</code>，那么每次触发事件时，<a href="/event.data/"><code>event.data</code></a>都传递给处理程序。<code>data</code>参数可以是任何类型，但如果是字符串类型时，那么<code>selector</code>参数必须提供，或明确地传递<code>null</code>，这样的 data 参数不会误认为是选择器。最好是使用一个对象（键值对） ，所以可以作为属性传递多个值。</p>
|
||
<p>jQuery的1.4 ，相同的事件处理程序可以多次绑定到一个元素。这对于使用 <code>event.data</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="function"><span class="keyword">function</span> <span class="title">greet</span><span class="params">(event)</span> {</span> alert(<span class="string">"Hello "</span>+event.data.name); }</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"button"</span>).on(<span class="string">"click"</span>, { name: <span class="string">"Karl"</span> }, greet);</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"button"</span>).on(<span class="string">"click"</span>, { name: <span class="string">"Addy"</span> }, greet);</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>按一下按钮时，上面的代码会产生两个不同的警报。</p>
|
||
<p>除了可以向 <code>.on()</code> 方法传入 <code>data</code> 参数外，还可以向 <a href="/trigger">.trigger()</a> 或 <a href="/triggerHandler">.triggerHandler()</a> 中传入该参数。</p>
|
||
<h2 id="event-performance">Event performance（事件性能）</h2>
|
||
<p>在大多数情况下，一个事件如<code>click</code>很少发生，性能表现并不显注。但是，高频率事件比如<code>mousemove</code> 或者 <code>scroll</code>可以每秒触发几十个次，在这种情况下明智地使用事件变得更加重要。可以按如下的办法提高事件的性能：减少事件处理函数中的工作量；对于在事件处理函数中要用到的信息做好缓存而不是再重新计算一次；或使用<code>setTimeout</code>限制的页面更新的实际次数。</p>
|
||
<p>许多委派的事件处理程序绑定到 document 树的顶层附近，可以降低性能。每次发生事件时，jQuery 需要比较从 event target（目标元素） 开始到文档顶部的路径中每一个元素上所有该类型的事件。为了获得更好的性能，在绑定代理事件时，绑定的元素最好尽可能的靠近目标元素。避免在大型文档中，过多的在 <code>document</code> 或 <code>document.body</code> 上添加代理事件。</p>
|
||
<p>jQuery可以非常迅速处理<code>tag#id.class</code>形式的简单选择器，当它们是用来过滤委派事件。所以<code>"#myForm"</code>, <code>"a.external"</code>, 和 <code>"button"</code> 都是快速选择器。若代理事件的选择器使用了过于复杂的形式，特别是使用了分层选择器的情况，虽然说这样做会大大的降低性能，但是对于大多数应用而言，它的速度依然是足够快的。通过为寻找更合适的元素绑定事件的方法，就可以很简单的避免使用分层选择器的情况。例如，使用<code>$("#commentForm").on("click", ".addNew", addComment)</code>而不是<code>$("body").on("click", "#commentForm .addNew", addComment)</code>。</p>
|
||
<h2 id="additional-notes">Additional notes（其他注意事项）</h2>
|
||
<p>有一些事件的速记方法比如<a href="/click"><code>.click()</code></a>可用于附加或触发事件处理程序。对于速记方法的完整列表， 参见<a href="/category/events/">events category</a></p>
|
||
<p>虽然不建议，伪类事件名称<code>"hover"</code>可以作为<code>"mouseenter mouseleave"</code>的缩写使用。不要与 接受<em>两个</em>函数的<a href="/hover"><code>.hover()</code></a>方法混淆，这里只用一个处理函数绑定到伪类事件名称<code>"hover"</code>;处理程序应该检查的<code>event.type</code> 以确定是否是<code>mouseenter</code>或 <code>mouseleave</code>事件。</p>
|
||
<p>jQuery的事件系统需要一个DOM元素可以通过元素的属性附加数据，使事件就可以被跟踪和传递。<code>object</code>, <code>embed</code>, 和<code>applet</code>元素不能绑定数据，因此不能有jQuery的事件绑定。</p>
|
||
<p>W3C指定明确指定<code>focus</code> 和 <code>blur</code>事件没有冒泡，但是jQuery定义的跨浏览器的<code>focusin</code> 和 <code>focusout</code>事件，并且可以冒泡。当<code>focus</code> 和 <code>blur</code>绑定委派的事件处理程序时，jQuery分析名称，并提供将他们分别交付给<code>focusin</code> 和 <code>focusout</code>。为了保持一致性和清晰度，使用冒泡事件类型的名称。</p>
|
||
<p>在所有的浏览器，<code>load</code> ，<code>scroll</code>, 和 <code>error</code> 事件(例如, 在一个 <code><img></code> 元素上)不会冒泡。在Internet Explorer 8和更低，<code>paste</code> 和 <code>reset</code>事件不会冒泡，这样的事件是不支持委派使用，但若事件处理函数是直接绑定在产生事件的元素上的话，是<em>可以</em>使用这些事件的。</p>
|
||
<p><code>window</code>对象上的<code>error</code> 事件使用非标准的参数和返回值约定，所以jQuery 不支持该事件。作为替代，直接用<code>window.onerror</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">当点击段落时，显示该段落中的文本：</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>).on(<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-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>
|
||
<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">myHandler</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>).on(<span class="string">"click"</span>, {foo: <span class="string">"bar"</span>}, myHandler)</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="entry-example" id="example-2">
|
||
<h4>Example: <span class="desc">取消表单的提交动作，并且通过返回 false 的方法来防止事件冒泡：</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>).on(<span class="string">"submit"</span>, <span class="literal">false</span>)</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="entry-example" id="example-3">
|
||
<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>).on(<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-4">
|
||
<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>).on(<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-5">
|
||
<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>
|
||
</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>$(<span class="string">"p"</span>).on(<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><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-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>
|
||
</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="class">.test</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#000</span>;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"> .<span class="number">5</span>em;</span></span> <span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">1</span>px solid <span class="hexcolor">#444</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="class">.active</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#900</span>;</span></span><span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="class">.inside</span> <span class="rules">{ <span class="rule"><span class="attribute">background-color</span>:<span class="value"> aqua;</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">div</span> <span class="attribute">class</span>=<span class="value">"test"</span>></span>test div<span class="tag"></<span class="title">div</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 class="string">"div.test"</span>).on({</span></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>).toggleClass(<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>});<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">点击任何一个段落时，就在它后面追加一个段落。注意，.on() 会为任何段落添加事件，包括新生成的段落，因为当事件冒泡到已经存在的 body 元素上时，就会触发绑定的事件。</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>
|
||
</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 me!<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="keyword">var</span> count = <span class="number">0</span>;</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"body"</span>).on(<span class="string">"click"</span>, <span class="string">"p"</span>, <span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).after(<span class="string">"<p>Another paragraph! "</span>+(++count)+<span class="string">"</p>"</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">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-8">
|
||
<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">"body"</span>).on(<span class="string">"click"</span>, <span class="string">"p"</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-9">
|
||
<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">"body"</span>).on(<span class="string">"click"</span>, <span class="string">"a"</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></section>
|
||
</div></article> </div>
|
||
</article> |