第四章
事件处理函数
-
在特定事件发生时调用特定的JavaScript代码
event = "JavaScript statement(s)" 有很多种事件处理函数:
onload, onunload, onchange, onmouseover, onmouseout, onmousedown, onmouseup, onclick事件，具体参见HTML DOM 事件
-
JavaScript代码包含在一对引号直接，这对引号之间可以放置多个JavaScript语句，用“;”隔开就行
onclick = "showPic(this)"//this表示当前对象 -
在事件处理函数被触发之后，引号之间的JavaScript语句被执行，被调用的语句可以给这个事件处理函数返回一个值。返回true代表这个事件被触发了，false代表没有触发，利用这点，可以拦截一些默认事件,比如下面这个链接，点击之后由于返回的是
false,浏览器认为这个事件没有被触发，所以不会发生跳转<a herf="http://www.example.com" onclik="return false;">Click me</a>
一些常用属性
- childNodes属性：用于获取任何一个元素的所有子元素，是一个包含这个元素所有子元素的数组（子元素除了元素节点还包括很多其他节点）
- nodeType属性：获取一个节点的节点类型，节点类型是通过数字表示
- 1代表元素节点
- 2代表属性节点
- 3代表文本节点
- nodeValue属性：用于获得一个节点的值,一般元素节点的值是null，文本节点的值是它里面的文本内容
- firstChild属性：获得一个节点的第一个子节点，等同于childNodes[0]
- lastChild属性，获得一个节点的最后一个子节点，等同于node.childNodes[node.childNodes.length-1]
第五章
平稳退化
定义：让访问者的浏览器不支持JavaScript的情况下仍然可以正常访问你的网站。
-
例子：
<a herf="http://www.example.com" onclik=this.href;return false;">Click me</a>即使JavaScript被禁用，上面的代码任然可以正常跳转
-
尽量不要使用 JavaScript 伪协议，比如:
<a herf="javascript:showPic('xxxx')";return false;">Click me</a>以上代码在JavaScript失效后无法正确显示
渐进增强
- 定义：用一些额外信息去包裹原始数据，增强数据的效果，但不影响数据内容本身，比如 CSS 之于 HTML。
分离行为与内容
可以在外部JavaScript文件里面把事件添加到 HTML 文档中的某个元素上，而不用在 html 里面嵌入类似“onclick=xxx”之类的 JavaScript 代码。简单地说就是：HTML里面最好不要出现 JavaScript 代码！
-
方式：
element.event = action -
例子：为所有 "a" 标签添加popUp()函数调用：
var links = document.getElementsByTagName("a"); for(var i=0; i<links.length; i++){ if(links[i].getAttribute("class") == "popup"){ links[i].onClick = function() { popUp(this.getAttribute("href")); return false; } } }这样，只要为所有a标签添加一个"popup"的类就可以完成替换。
-
为了保证JavaScript代码在文档加载完后才执行，可以把代码打包添加到window的onload事件上去
window.onload = prepareLinks; function prepareLinks(){ var links = document.getElementsByTagName("a"); for(var i=0; i<links.length; i++){ if(links[i].getAttribute("class") == "popup"){ links[i].onClick = function() { popUp(this.getAttribute("href")); return false; } } } }
对象检测
-
可以把某个方法打包在if语句里面，通过求值结果是否为true来判定当前浏览器对此方法的支持（注意不需要括号），比如：
if(document.getElementById){ statements using getElementById } //或者用非逻辑 if(!document.getElementById){ return false; }
第六章
共享onload事件
我们知道需要文档加载完后立即执行的函数可以用window对象的onload与之关联：
window.onload = funtion
但是每次只能绑定一个，如果绑定多个，只有最后一个会被执行,下面介绍一个方法可以绑定多个函数：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
利用这个函数，可以把那些需要在页面加载完后立即执行的函数创建为一个队列：
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);