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

在元素一篇介绍过,jQuery 可以使用 $(document).ready() 来使得代码在 DOM 加载完毕后自动执行代码,接下来具体介绍下这个机制。

$document.ready() 可以简写为 $(),为了书写更直观,本文暂不采用简写方式。

比较 window.onload

我们可以使用原生 Javascript 中的 window.load 方法实现 $document.ready() 的效果,但两者还是有不小的差异。
对于 window.load 是指整个文档对象已经完完全全地加载到页面中来,而 jQuery$document.ready() 方法则是指 DOM 完全就绪,两者的差异可以用一个例子来说明:

假设当前页面具有大量的图像文件,对于 window.load 方法,必须等到所有关联的图像文件都已经下载完毕后才生效,而 $document.ready() 则在 HTML 下载完毕并已经解析为 DOM 树时便已经生效。

这样看上去貌似 jQuery 的方法要优于原生 Javascript 的处理方法,实际上也的确如此,但对于有些情况下,则必须使用 load 方法才会生效,例如上例中的图像,当我们在代码中需要对图像的长宽属性进行处理时,则需要使用 load 方法来实现,这两种方法应该根据实际需求配合使用。

单页面执行多个脚本

在传统的 Javascript 代码中,我们经常看到将一个函数指定给 DOM 元素的对应属性,例如如下代码:

function myClick() {
  //do some stuff here.
}

<button onclick="myClick();">click me</button>

也可以写成这种形式:

document.querySelector('button').onclick = myClick;

这里写成 myClick 而不是 myClick(),因为前者指的是对函数引用,后者指的是函数执行,前者因为是引用,所以可以再将来被再次调用,而后者则是指页面加载时立即调用执行,不能再被调用。

这样看上去貌似没什么问题,但是如果有两个函数需要指定时就会遇到麻烦,因为 onclick 属性只能保存对一个函数的引用,如果我们写成以下形式:

document.querySelector('button').onclick = myClick1;
document.querySelector('button').onclick = myClick2;

最后代码执行后的效果是 myClick2 会覆盖 myClick1
而如果我们使用 jQuery 的机制,则能很好地解决这个问题,每次调用 $doucment.ready() 时都会向内部的行为队列添加一个新的函数,当页面加载完毕后,所有的函数都会按顺序执行。

$(document).ready(function() {
  $('button').click(function() {
    //do myClick1 stuff here.
  });
  $('button').click(function() {
    //do myClick2 stuff here.
  });
});

然而实际上现版本的 Javascript 已经引入 addEventListener 方法来解决这个问题:

document.querySelector('button').addEventListener('click', myClick1, false);
document.querySelector('button').addEventListener('click', myClick2, false);

但是考虑到兼容性,jQuery 可以让我们更加轻松地应对这个问题。

解决命名冲突

很多时候,我们需要使用的库不仅仅只有 jQuery,而由于很多库都会采用 $ 来作为标识符,因此就需要一种解决命名冲突的机制。
为了解决这个常见的问题,jQuery 提供了一个 noConflict() 方法,使用该方法后,可以将 $ 的控制权过度给其他的库来使用。假设我们有个 myLibrary 的库,该库也使用 $ 来作为标识符,那么使用方法为:

<script src="myLibrary.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
//write code here.
</script>

此时再写 jQuery 方法时就必须采用以下的形式:

jQuery(document).ready(function($) {
  //do stuff here.
});

或者使用简写方式:

jQuery(function($) {
  //do stuff here.
});

这个其实很好理解,即我们将 jQuery 对象本身作为参数传递给回调函数,并且在内部命名为 $,这样在回调函数内部可以自由书写正常的 jQuery 代码。

参考

http://book.douban.com/subject/24669823/

    原文作者:StephenLee
    原文地址: https://segmentfault.com/a/1190000000519538
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞