JavaScript DOM 9.22 (gallery1)

JavaScript图片库

图片发布到网上的办法很多。可以简单的放在同一个网页里，但是如果需要发布的图片比较多，这个页面就会过于庞大。

因此我们可以为每张图片分别建一个网页，但是时间消耗过大，手段繁琐。

使用js来创建图片库：把整个图片库的浏览链接集中安排在图片库的主页里，在点击链接图片后才把相应图片传达。

标记

创建了一个无序列表的html，每个li超链接是一个图片。希望改进：

1. 点击链接，留在窗口而不是转到另一个窗口。
2. 点击链接，希望看到图片和原有清单。

改进方法：

1. 通过增加一个“占位符”图片方法在这个主页上为图片预留一个浏览区域。
2. 点击某个链接时，拦截这个网站默认行为。
3. 点击某个链接时，把“占位符”图片替换成那个链接相对应的图片。

先来解决“占位符”图片的问题。依据个人喜好来选择，空白图片也可以。然后插入placeholder：

现在标记文件已经准备好了，接下来是编写js。

JavaScript

思路：把占位符图片改为想查看的图片，要改变占位符图片的src属性。应该使用setAttribute来做改变。所以利用这个方法制作一个函数，这个函数只有一个参数，就是一个图片链接。它通过改变占位符图片的src属性的办法将其替换为参数图片。

函数名字：function showPic(whichpic)

过程：我是逆推方法，我们需要通过setAttribute改变占位符图片的src属性：

 ____.setAttribute("src",____)  

第一个____是占位符图片元素，我们使用getElementById可以获得：

document.getElementById("placeholder")

第二个____是要改变为的图片地址，也就是列表里图片的地址，也就是参数whichpic的地址。所以我们要获取whichpic的href属性，这个可以使用getAttribute来获得属性：

whichpic.getAttribute("href")

所以得出：

document.getElementById("placeholder").setAttribute("src",whichpic.getAttribute("href"));

为了代码的美观和易读性：

var placeholder = document.getElementById("placeholder")
var source = whichpic.getAttribute("href")

最后可简化：

placeholder.setAttribute("src",source);

最终得到的函数：

function showPic(whichpic){
var placeholder = document.getElementById("placeholder");
var source = whichpic.getAttribute("href");
placeholder.setAttribute("src",source);
}

应用这个函数

函数保存js格式在script文件夹里，在之前插入一个引用js的链接：

这样就可以使用showPic这个函数了。就此打住，showPic函数永远不会被调用。我们需要给图片链接添加行为，也就是事件处理函数。

事件处理函数

在特定事件发生时调用特定的js代码。例如，在鼠标悬停某个元素触发一个动作，使用onmouseover事件处理函数；在鼠标指针离开某个元素的时候触发一个动作，就需要使用onmouseout事件处理函数。

我想在用户点击某个链接时触发一个动作，需要使用onclick事件处理函数。

showPic()函数需要一个参数，这个参数是一个带有href属性的元素节点，当我把onclick事件处理函数嵌入到一个连接中，需要把这个链接本身用作showPic函数的参数。

可以使用this关键字来做到这一点，含义是：“这个对象”。

onclick = "showPic(this);"

但是仅仅把这个放入图片链接中，会遇到一个问题：点击这个链接时，不仅函数showPic会被调用，链接的默认行为也会被调用，我需要阻止图片出现。

事件处理函数的工作机制：我们给一个链接添加onclick事件处理函数，并让这个处理函数所触发的js返回布尔值true或false。这样一来，被点击了，返回true；没被点击，返回false，所以可以增加一条return false的语句，防止用户被带入目标链接窗口：

benz

函数和return false的顺序不能错