脚本宝典收集整理的这篇文章主要介绍了

细说 jQuery 事件篇(一) – 代码执行时机

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>在元素一篇介绍过,<code><a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a></code> 可以使用 <code>$(document).ready()</code> 来使得代码在 <code><a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a></code> 加载完毕后自动执行代码,接下来具体介绍下这个机制。</p> <blockquote> <p><code>$document.ready()</code> 可以简写为 <code>$()</code>,为了书写更直观,本文暂不采用简写方式。</p> </blockquote> <h2 id="articleHeader0">比较 window.onload</h2> <p>我们可以使用原生 <code>Javascript</code> 中的 <code>window.load</code> 方法实现 <code>$document.ready()</code> 的效果,但两者还是有不小的差异。<br /> 对于 <code>window.load</code> 是指整个文档对象已经完完全全地加载到页面中来,而 <code><a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a></code> 的 <code>$document.ready()</code> 方法则是指 <code><a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a></code> 完全就绪,两者的差异可以用一个例子来说明:</p> <blockquote> <p>假设当前页面具有大量的图像文件,对于 <code>window.load</code> 方法,必须等到所有关联的图像文件都已经下载完毕后才生效,而 <code>$document.ready()</code> 则在 <code><a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a></code> 下载完毕并已经解析为 <code><a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a></code> 树时便已经生效。</p> </blockquote> <p>这样看上去貌似 <code><a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a></code> 的方法要优于原生 <code>Javascript</code> 的处理方法,实际上也的确如此,但对于有些情况下,则必须使用 <code>load</code> 方法才会生效,例如上例中的图像,当我们在代码中需要对图像的长宽属性进行处理时,则需要使用 <code>load</code> 方法来实现,这两种方法应该根据实际需求配合使用。</p> <h2 id="articleHeader1">单页面执行多个脚本</h2> <p>在传统的 <code>Javascript</code> 代码中,我们经常看到将一个函数指定给 <code>DOM</code> 元素的对应属性,例如如下代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function myClick() { //do some stuff here. } <button onclick=&quot;myClick();&quot;>click me</button><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">myClick</span><span class="hljs-params">()</span> </span>{ <span class="hljs-comment">//do some stuff here.</span> } &lt;button onclick=<span class="hljs-string">"myClick();"</span>&gt;click me&lt;/button&gt; </code></pre> <p>也可以写成这种形式:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="document.querySelector('button').onclick = myClick; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs dart"><code><span class="hljs-built_in">document</span>.<span class="hljs-built_in">querySelector</span>(<span class="hljs-string">'button'</span>).onclick = myClick; </code></pre> <blockquote> <p>这里写成 <code>myClick</code> 而不是 <code>myClick()</code>,因为前者指的是对函数引用,后者指的是函数执行,前者因为是引用,所以可以再将来被再次调用,而后者则是指页面加载时立即调用执行,不能再被调用。</p> </blockquote> <p>这样看上去貌似没什么问题,但是如果有两个函数需要指定时就会遇到麻烦,因为 <code>onclick</code> 属性只能保存对一个函数的引用,如果我们写成以下形式:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="document.querySelector('button').onclick = myClick1; document.querySelector('button').onclick = myClick2; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs dart"><code><span class="hljs-built_in">document</span>.<span class="hljs-built_in">querySelector</span>(<span class="hljs-string">'button'</span>).onclick = myClick1; <span class="hljs-built_in">document</span>.<span class="hljs-built_in">querySelector</span>(<span class="hljs-string">'button'</span>).onclick = myClick2; </code></pre> <p>最后代码执行后的效果是 <code>myClick2</code> 会覆盖 <code>myClick1</code>。<br /> 而如果我们使用 <code>jQuery</code> 的机制,则能很好地解决这个问题,每次调用 <code>$doucment.ready()</code> 时都会向内部的行为队列添加一个新的函数,当页面加载完毕后,所有的函数都会按顺序执行。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$(document).ready(function() { $('button').click(function() { //do myClick1 stuff here. }); $('button').click(function() { //do myClick2 stuff here. }); }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>$(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ $(<span class="hljs-string">'button'</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">//do myClick1 stuff here.</span> }); $(<span class="hljs-string">'button'</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">//do myClick2 stuff here.</span> }); }); </code></pre> <p>然而实际上现版本的 <code>Javascript</code> 已经引入 <code>addEventListener</code> 方法来解决这个问题:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="document.querySelector('button').addEventListener('click', myClick1, false); document.querySelector('button').addEventListener('click', myClick2, false); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs dart"><code><span class="hljs-built_in">document</span>.<span class="hljs-built_in">querySelector</span>(<span class="hljs-string">'button'</span>).addEventListener(<span class="hljs-string">'click'</span>, myClick1, <span class="hljs-keyword">false</span>); <span class="hljs-built_in">document</span>.<span class="hljs-built_in">querySelector</span>(<span class="hljs-string">'button'</span>).addEventListener(<span class="hljs-string">'click'</span>, myClick2, <span class="hljs-keyword">false</span>); </code></pre> <p>但是考虑到兼容性,<code>jQuery</code> 可以让我们更加轻松地应对这个问题。</p> <h2 id="articleHeader2">解决命名冲突</h2> <p>很多时候,我们需要使用的库不仅仅只有 <code>jQuery</code>,而由于很多库都会采用 $ 来作为标识符,因此就需要一种解决命名冲突的机制。<br /> 为了解决这个常见的问题,<code>jQuery</code> 提供了一个 <code>noConflict()</code> 方法,使用该方法后,可以将 <code>$</code> 的控制权过度给其他的库来使用。假设我们有个 <code>myLibrary</code> 的库,该库也使用 <code>$</code> 来作为标识符,那么使用方法为:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;myLibrary.js&quot;></script><br /> <script src=&quot;jquery.js&quot;></script><br /> <script> jQuery.noConflict(); //write code here. </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"myLibrary.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jquery.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> jQuery.noConflict(); <span class="hljs-comment">//write code here.</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>此时再写 <code>jQuery</code> 方法时就必须采用以下的形式:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="jQuery(document).ready(function($) { //do stuff here. }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>jQuery(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$</span>) </span>{ <span class="hljs-comment">//do stuff here.</span> }); </code></pre> <p>或者使用简写方式:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="jQuery(function($) { //do stuff here. }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code>jQuery(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($)</span> </span>{ <span class="hljs-comment">//do stuff here.</span> }); </code></pre> <p>这个其实很好理解,即我们将 <code>jQuery</code> 对象本身作为参数传递给回调函数,并且在内部命名为 <code>$</code>,这样在回调函数内部可以自由书写正常的 <code>jQuery</code> 代码。</p> <h2 id="articleHeader3">参考</h2> <p><a rel="nofollow" href="http://book.douban.com/subject/24669823/" target="_blank">http://book.douban.com/subject/24669823/</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

细说 jQuery 事件篇(一) – 代码执行时机

全部内容,希望文章能够帮你解决

细说 jQuery 事件篇(一) – 代码执行时机

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过