</pre><pre name="code" class="javascript"><span style="font-size:14px;">function showPic(whichpic)
{
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var discription = document.getElementById("discription");
discription.firstChild.nodeValue = text;
}</span>
点击图片,在id为placeholder的位置上显示图片,在discription的位置上显示该图片的title;Picture中的onclick事件写法如下:
<span style="font-size:14px;">οnclick="showpic(this); return false;"</span>
this表示这个元素;
return false 表示这个链接点击无效;
默认情况下,当用户使用鼠标点击一个链接时(即一个a元素),浏览器会执行一次http请求,将a元素中href属性所指向的内容下载到浏览器上。onclick事件调用了showPic函数,目的是将链接所指向的图片资源即刻显示在页面中,用户在点击链接时就会执行这个函数。但是,这样仍然会使浏览器发送一个http请求,并在新页面加载图片,因为这个动作是浏览器的默认行为,return false的作用就在于取消这个默认行为。
当用户浏览器不支持JavaScript或者JavaScript功能关闭,通过超链接的href属性,用户仍然能够在新页面看到这幅图片,对于开启了JavaScript功能的浏览器,用户可以获得更好的使用体验。这种做法也被称作为“Unobtrusive JavaScript”。
附:nodeValue得到节点的值,但是<p>元素本身的nodeValue属性是一个空值,文本的值是<p>元素的子节点。