JavaScript DOM 编程艺术学习笔记 02

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_34247155

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5af81fa16fb9a07ac16283d9

JavaScript函数的调用

下面是showPic.js的完整代码：

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

现在需要在HTML文档里面插入一个链接来引用这个JavaScript脚本文件，把下面这条语句插入在<head>元素中：

<script type="text/javascript" src="script/showPic.js"></script>
复制代码

事件处理函数

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
引用--www.w3school.com.cn/jsref/jsref…

我想在用户点击某个链接的时候触发一个动作，所以需要使用onclick事件处理函数。我想通过onclick函数去触发的动作是调用showPic()函数，而想要调用这个函数就必须向它传递一个参数，一个带有href属性的元素节点。在HTML文档里面，当我把onclick事件处理函数嵌入一些元素的时候，我需要把那些元素本身用作showPic()函数的参数。有个非常简单而又非常有效的方法可以做到这一点：使用this关键字，这个关键字的含义是“这个对象”。具体到这个例子：

<li >
    <a href"images/fireworks.jpg" onclick="showPic(this)" title="A fireworks diplay"> firework </a>
</li>
复制代码

onclick事件发生的时候不仅showPic函数将被调用，链接点击时的默认行为也将发生。这意味着用户还是会被带到另一个图片查看窗口里去，如果我希望这种默认行为不发生的话。。。。给某个元素添加了onclick函数后，一旦发生预定事件，相应的js代码就会得到执行。那些js代码可以返回一个结果，而这个结果将被传递回onclick函数，，比如点击<li>元素时候，js返回布尔值ture，onclick函数就会认为这个元素被点击了，反之，js代码如果返回值是false，onclick函数将认为这个元素没有人点击。。。为了解决这个问题。可以选择在onclick函数参数后面加上return false，这样点击元素就不会跳转到另外一个页面了。

<li >
    <a href"images/fireworks.jpg" onclick="showPic(this);return false;" title="A fireworks diplay"> firework </a>
</li>
复制代码

html DOM对象

Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。请参考：www.w3school.com.cn/jsref/dom_o…

JavaScript DOM 编程艺术 学习笔记 02

JavaScript函数的调用

事件处理函数

html DOM对象

Document 对象

DOM Element

DOM Attribute

DOM Event

JavaScript DOM 编程艺术学习笔记 02