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

第四章

事件处理函数

• 在特定事件发生时调用特定的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,浏览器认为这个事件没有被触发，所以不会发生跳转

  Click me
  

一些常用属性

• childNodes属性：用于获取任何一个元素的所有子元素，是一个包含这个元素所有子元素的数组（子元素除了元素节点还包括很多其他节点）
• nodeType属性：获取一个节点的节点类型，节点类型是通过数字表示
  • 1代表元素节点
  • 2代表属性节点
  • 3代表文本节点
• nodeValue属性：用于获得一个节点的值,一般元素节点的值是null，文本节点的值是它里面的文本内容
• firstChild属性：获得一个节点的第一个子节点，等同于childNodes[0]
• lastChild属性，获得一个节点的最后一个子节点，等同于node.childNodes[node.childNodes.length-1]

node关系图

第五章

平稳退化

• 定义：让访问者的浏览器不支持JavaScript的情况下仍然可以正常访问你的网站。

• 例子：

    Click me
  

  即使JavaScript被禁用，上面的代码任然可以正常跳转

• 尽量不要使用 JavaScript 伪协议，比如:

    Click me
  

  以上代码在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

  这样，只要为所有a标签添加一个"popup"的类就可以完成替换。

• 为了保证JavaScript代码在文档加载完后才执行，可以把代码打包添加到window的onload事件上去

  window.onload = prepareLinks;
  function prepareLinks(){
      var links = document.getElementsByTagName("a");
      for(var i=0; i

对象检测

• 可以把某个方法打包在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);