第4章 准备
准备阶段最重要是关于HTML/CSS和Javascript如何协作的问题。
浏览器初始化顺序是首先脚步,然后是statements,最后是html。
如果在js里面直接引用body里面的element就会报错,最好是把执行脚本放到函数里调用。
function initializePage() {
var x = document.getElementById('test');
x.onclick = function () {alert('Hello world!')};
}
window.onload = initializePage;
一些常见的钩子
id:创建钩子最简单的方法,每个id在文档中只能使用一次。
var x = document.getElementById('hook');
var x = document.getElementById('hook');
class:可以为一系列的元素初始化相同的行为。
var lists = document.getElementsByTagName('ul');
for (var i=0; i<lists.length; i++) {
if (lists[i].className != 'menutree') continue;
//初始化行为
}
自定义属性:即不属于(X)HTML规范的属性,这是不合法的,但有时为了脚本的方便使用它。
var maxLength = this.getAttribute('maxlength');
名/值对:即写成如下的形式,然后从className中通过操作字符串获取状态。
<textarea class="maxlength=300"></textarea>
准备页面:设置事件处理程序,确定访问者状态,设置访问,产生内容,定义关系(relatedElement),修改文档结构。
<script>标签
defer属性:表示正在加载中的脚本不包含任何会改变HTML的指令(如document.write)。Explorer仅在页面已经完全加载之后才会执行拥有defer属性的脚本。
XHTML规定包含内容的script标签必须定义成CDATA,它会告诉XML/HTML解释器不要解析这些内容,而是直接送给脚本引擎。
<script type="text/javascript">
//<![CDATA[
alert('Hello World!');
//]]>
</script>
所有的脚本都被注册到HTML的全局对象中,同一个变量可以在多个脚本中使用,且为最后定义的那个。
当浏览器遇到script标签时,发送一个HTTP请求去获取脚本文件,解析其中的脚本,对HTML页面的分析和渲染暂停,直到脚本加载完成。
load事件会在页面完全加载时触发,window.onload = ; 多次设置onload会覆盖之前的设置,需要编写函数在同一个元素上设置多个事件处理程序。
等待load时会因为图片等造成延迟,这个问题很难解决,目前只有Mozilla支持的DOMContentLoaded事件,在文档加载完成后执行,不必等待图片。