细说 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/