uTools-Manuals/docs/jQuery/triggerHandler.html

96 lines
7.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.triggerHandler()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/events/">事件</a> &gt; <a href="/category/events/event-handler-attachment/">绑定事件处理器</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/triggerHandler/" target="_blank">.triggerHandler()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="triggerHandler1"><h2 class="section-title">
<span class="name">.triggerHandler( eventType [, extraParameters ] )</span><span class="returns">返回: <a href="/Types/#Object">Object</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>为一个事件执行附加到元素的所有处理程序。</p>
<ul class="signatures"><li class="signature" id="triggerHandler-eventType-extraParameters">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.2/">1.2</a></span>.triggerHandler( eventType [, extraParameters ] )</h4>
<ul>
<li>
<div><strong>eventType</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>以后包含JavaScript事件类型的字符串比如<code>click</code><code>submit</code></div>
</li>
<li>
<div><strong>extraParameters</strong></div>
<div>类型: <a href="/Types/#Array">Array</a>
</div>
<div>传递给事件处理程序的额外数组参数。</div>
</li>
</ul>
</li></ul>
<div class="longdesc">
<p><code>.triggerHandler()</code> 方法的行为与 <code>.trigger()</code> 相似,不同之处有如下几点:
</p>
<ul>
<li><code>.triggerHandler()</code> 方法并不会触发事件的默认行为。(例如,表单提交)。
</li>
<li><code>.trigger()</code> 会影响所有与 jQuery 对象相匹配的元素,而 <code>.triggerHandler()</code> 仅影响第一个匹配到的元素。
</li>
<li>使用 <code>.triggerHandler()</code> 创建的事件,并不会在 DOM 树中向上冒泡。如果事件没有被目标元素直接处理,那么它就不会进行任何处理。
</li>
<li>与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,<code>.triggerHandler()</code> 返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 <code>undefined</code>
</li>
</ul>
<p>若想了解更多关于本方法的信息,请参阅 <code><a href="/trigger">.trigger()</a></code> 方法。
</p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">如果您使用 .triggerHandler() 触发 focus 事件,那么它只会触发绑定了该事件的处理函数,而浏览器的默认 focus 动作是不会被触发的。</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">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"old"</span>&gt;</span>.trigger("focus")<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"new"</span>&gt;</span>.triggerHandler("focus")<span class="tag">&lt;/<span class="title">button</span>&gt;</span><span class="tag">&lt;<span class="title">br</span>/&gt;</span><span class="tag">&lt;<span class="title">br</span>/&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">value</span>=<span class="value">"To Be Focused"</span>/&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</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">"#old"</span>).click(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"input"</span>).trigger(<span class="string">"focus"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#new"</span>).click(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"input"</span>).triggerHandler(<span class="string">"focus"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"input"</span>).focus(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"&lt;span&gt;Focused!&lt;/span&gt;"</span>).appendTo(<span class="string">"body"</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> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article> </div>
</article>