（四）事件处理――（4）网页上的多个脚本（Multiple scripts on one page） _Web前端

（4）事件处理――（4）网页上的多个脚本（Multiple scripts on one page）

The traditional mechanism for registering event handlers through JavaScript (rather than adding handler attributes right in HTML) is to assign a function to the DOM element's corresponding attribute. For example, suppose we had defined the function:

	function doStuff() {
		// Perform a task...
	}

We could then either assign it within our HTML markup:

<body onload="doStuff();">

Or, we could assign it from within JavaScript code:

window.onload = doStuff;

Both of these approaches will cause the function to execute when the page is loaded. The advantage of the second is that the behavior is more cleanly separated from the markup.

通过js注册事件处理器的传统机制是绑定一个函数到DOM元素的相应的属性上（不是直接在HTML中添加处理器属性）。比如，假定我们已经定义了下面这个函数：

	function doStuff() {
		// Perform a task...
	}

我们或者可以在我们的HTML标记中添加：

<body onload="doStuff();">

或者我们可以使用js代码绑定他：

window.onload = doStuff;

这些方法都可以让页面在加载后去执行代码。第二种的优点是行为很干净的与标记相分离。

Referencing vs. calling functions
Note here, that when we assign a function as a handler, we use the function name but omit the trailing parentheses. With the parentheses, the function is called immediately; without, the name simply identifies, or referencesthe function, and can be used to call it later.

引用和调用函数

注意一下，当我们把一个函数当作处理器的时候，我们使用函数的名字，而省略了尾部的括号。有括号的时候，函数将会立即被调用，没有的时候，名字只是代表或者引用这个函数，同时可能被用来以后调用。

With one function, this strategy works quite well. However, suppose we have a second function:

function doOtherStuff() {
// Perform another task...
}

We could then attempt to assign this function to run on page load:

window.onload = doOtherStuff;

However, this assignment trumps the first one. The .onloadattribute can only store one function reference at a time: so we can't add this to the existing behavior.

在只有一个函数的时候，这个策略工作的很好，但是假定我们有第二个函数：

function doOtherStuff() {
// Perform another task...
}

我们可能企图让我们的函数在页面加载的时候就运行起来：

window.onload = doOtherStuff;

然而这个绑定覆盖了第一个。.onload属性一次只能存储一个函数引用，因此我们不能把这个添加在已经存在的行为上。

The $(document).ready()mechanism handles this situation gracefully. Each call to the method adds the new function to an internal queue of behaviors; when the page is loaded all of the functions will execute. The functions will run in the order in which they were registered.

$(document).ready()机制很优雅的处理了这种场景。每一个调用的函数将会被添加一个函数到内部的行为队列中。当页面被加载后，所有的函数将会被执行。这些函数将会按照我们注册函数的顺序来执行。

To be fair, jQuery doesn't have a monopoly on workarounds to this issue. We can write a JavaScript function that forms a new function that calls the existing onloadhandler, then calls a passed-in handler. This approach avoids conflicts between rival handlers like $(document).ready()does, but lacks some of the other benefits we have discussed. In modern browsers, including Internet Explorer 9, the DOMContentLoadedevent can be triggered with the W3C standard document.addEventListener()method. However, if we need to support older browsers as well, jQuery handles the inconsistencies that these browsers present so that we don't have to.

公平的说，jquery并不是仅有的可以在工作区中解决这件事的方法。我们可以写一个js函数，用它来组织一个新函数，先让他调用已在的onload事件处理器，然后调用后来的处理器。这种方法像$(document).ready()一样避免了两个相竞争的处理器之间的冲突，但是缺少一些我们讨论过的其他好处。在现在浏览器中，包括IE9，DOMContentLoader事件可以使用W3C标准的document.addEventListener()方法来触发。然而，如果我们也需要支持早期的浏览器，jquery可以处理这些浏览器呈现的不同，这样我们就不需要去做了。