本章继续对图片库进行改进，主要内容包括三个方面：

1. 把事件处理函数移出文档；

2. 向后兼容；

3. 确保可访问。

之前代码的HTML片段，此时如果浏览器不支持JS，图片显示也能正常工作，只是体验感降低。可见将“href”设置为真实存在的值，能够保证平稳退化。

 <a href="image/2.jpg"  onclick="showpic("image/2.jpg"); return false;"title="2" >2 </a>

考虑分离结构层（JS）和行为层。作为一条原则：如果想用JS给某个网页添加一些行为，就不应该让JS代码对这个网页的结构有任何期待。

function imagegallery(){

    if (!document.getElementsByTagName){

        return false; //检查是否有该方法

    }

    if(!document.getElementById){

        return false;//检查是否有该方法

    }

        if(!document.getElementById("imagegallery")){

        return false;//检查是否ID为imagegallery的元素

    }

    var gallery=document.getElementById("imagegallery");//找到该元素

    var links=gallery.getElementsByTagName("a");//所以图片链接元素

    for (var i=0; i<links.length;i++ )//遍历

    {

        links[i].onclick=function()//设置onclick函数

        {

            return !showPic(this);//取消元素点击的默认行为，传给showPic的参数是关键字this，他代表此时与onclick方法相关联的那个元素。

        }

    }

}

共享onload事件函数：addLoadEvent。

function addLoadEvent(func){

    var oldload=window.onload;//把现有的onload函数存入到oldload

    //alert(typeof oldload)

    if (typeof oldload !='function')

    {

        window.onload=func;//如果oldload不是函数类型，那么之前没有函数绑定onload

    }else{

        window.onload=function(){

            oldload();

            func();

        }

    }

}

对于showPic函数，之前没有对它进行检查和测试。

function showPic(whichpic){

    if (!document.getElementById("placeholder"))

    {

        return false//getElementById函数在imagegallery已经检查过，所以只需检查是否含有id=placeholder的元素。

    }

    var source=whichpic.getAttribute("href");

    var placehold=document.getElementById("placeholder");

    if (placehold.nodeName!='IMG')//nodeName总是返回一个大写字母的值，即时元素在HTML里是小写的

    {

        return false

    }

    placehold.setAttribute("src",source);

    if (document.getElementById("describe"))//检查是否有describe元素，如果有

    {

        var tx=whichpic.getAttribute("title")?whichpic.getAttribute("title"):" ";//检查图片是否有title，有就修改，没有为空

        var des=document.getElementById("describe");

        if (des.firstChild.nodeType==3)

        {

            des.firstChild.nodeValue=tx;

        }

    }

    return true;//如果切换成功放回TRUE，否则FALSE

}

把JS从HTML里分离出去还有一个好处，在把内嵌型事件处理函数移出标记文档是，在文档里为JS留下一个挂钩：

 <ul id="imagegallery">

这个挂钩也可以用在CSS里。在html文件的<head>部分引用它：

<link rel="stylesheet" href="mywebCSS.css" type="text/css" media="screen"/>

DOM Core和HTML DOM：两种方法可以互换。

在js代码中遇到以下几个DOM方法：

getElementById

getElementsByTagName

getAttribute

setAttribute

这些方法书序DOM Core，并不属于js，任何一种支持DOM的语言都可以使用。

在JS和DOM为HTML文件编写脚本时，还有许多属性可以使用。比如onclick，用于图片库的事务管理。这些属性属于HTML-DOM。

比如：

document.getElementsByTagName("form")可以简化为document.forms。

element.getAttribute("src")可以简化为element.src。

HTML-DOM只能用来处理web文档。

本章的几个改进：

尽量不让JS代码依赖于哪些没有保证的假设，为此需要增加很多测试和检查。

没有使用onkeypress也能使JS代码的可访问性得到保证。

最重要的是，把事件处理函数从标记文档分离到一个外部JS文件中。

结构与行为的分离越大越好。

《JavaScript Dom 编程艺术》读书笔记-第6章的更多相关文章

  1. JavaScript DOM编程艺术读书笔记(三)

    第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...

  2. JavaScript DOM编程艺术读书笔记(二)

    第五章 最佳实践 平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某 ...

  3. JavaScript DOM编程艺术读书笔记(一)

    第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML( ...

  4. JavaScript DOM编程艺术 - 读书笔记1-3章

    1.JavaScript语法 准备工作 一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head& ...

  5. JavaScript DOM编程艺术 读书笔记

    2. JavaScript语法 2.1 注释      HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"< ...

  6. JavaScript DOM编程艺术读书笔记(四)

    第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...

  7. JavaScript DOM编程艺术-学习笔记（第二章）

    1.好习惯从末尾加分号:开始 2.js区分大小写 3.程序界万能的命名法则:①不以,数字开头的数字.字母.下划线.美元符号 ②提倡以下划线命名法来命名变量,以驼峰命名法来命名函数.但是到了公司往往会身 ...

  8. 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  9. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

  10. JavaScript DOM编程艺术-学习笔记

    发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...

随机推荐

  1. tomcat是怎么找到项目lib目录下的jar包的，求大神解答

    是通过java代码动态的修改classpath吗,和classloader有关系吗

  2. WebForm复合控件RadioButtonList、CheckBoxList、DropDownList

    1.RadioButtonList     单选集合 -属性:RepeatDirection:Vertical (垂直排布)/Horizontal (横向排布) RepeatLayout:Table ...

  3. DB2数据库许可证过期 SQLSTATE=42968

    Linux查看DB2许可信息: 执行su - db2inst1命令,进入db2命令行,执行db2licm -l命令. Windows查看DB2许可信息: windows+R打开黑窗口,db2cmd进入 ...

  4. Python+OpenCV图像处理（十四）—— 直线检测

    简介: 1.霍夫变换(Hough Transform) 霍夫变换是图像处理中从图像中识别几何形状的基本方法之一,应用很广泛,也有很多改进算法.主要用来从图像中分离出具有某种相同特征的几何形状(如,直线 ...

  5. P3648 [APIO2014]序列分割（斜率优化dp）

    P3648 [APIO2014]序列分割 我们先证明,分块的顺序对结果没有影响. 我们有一个长度为3的序列$abc$ 现在我们将$a,b,c$分开来 随意枚举一种分块方法,如$(ab)(c)$,$(a ...

  6. Python3 pip命令报错：Fatal error in launcher: Unable to create process using '"'

    Python3 pip命令报错:Fatal error in launcher: Unable to create process using '"' 一.问题 环境:win7 同时安装py ...

  7. 【题解】JSOIWC2019 Round1

    题面(T1变成5s(毒瘤出题人发现std超时了qaq)): 啥都不会qaq.但也送了不少分 题解: T1: 当T=0时直接异或前缀和,但T=1时就有点恶心 暴力能有80pts(防止大家爆零) 还珂以用 ...

  8. Java访问权限修饰符public protected friendly private用法总结（转载好文Mark）

    首先声明:Java中,friendly这个修饰符并没有显式的声明,在成员变量和方法前什么修饰符也不用,默认的就是friendly.为了条理清晰,分三种不同情况来总结. 一 访问权限修饰符修饰成员变量和 ...

  9. 8、zabbix监控方式及分布式监控(04)

    zabbix支持的监控方式 zabbix所能够显示的且可指定为监控接口类型的监控方式: Agent passive active SNMP:Simple Network Management Prot ...

  10. 牛客-数据库SQL实战

    查找最晚入职员工的所有信息 CREATE TABLE `employees` ( `emp_no` ) NOT NULL, `birth_date` date NOT NULL, `first_nam ...