JavaScript DOM 编程艺术笔记(4章-6章)

2016-09-22 本文已影响25人小毛同学

第四章

事件处理函数

在特定事件发生时调用特定的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]

node关系图

第五章

平稳退化

定义：让访问者的浏览器不支持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);