Garden of Sinners
0%

《JavaScript DOM编程艺术》第四章读书笔记

Posted on Edited on In ,

这里我们主要谈的是html上对用户事件的处理。

事件处理函数

时间处理函数的作用是，在特定时间发生时调用特定的JavaScript代码。

1
2
<a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;">
Fireworks</a>
1
2
3
4
5
function showPic(pic) {
  let source = pic.getAttribute("href");
  let placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src", source);
}
  • this表示这个<a>元素节点
  • event = "JS statements"来添加事件处理函数的语法
  • 如果仅仅把使劲按处理函数放到图片列表的一个链接中，我们会遇到一个问题：点击这个链接时，不仅showPic函数被调用，链接被点击的默认行为也会被调用。这意味着用户还是会被带到图片查看窗口。我们需要组织这个默认行为被调用。

一旦事件发生，相应的js代码就会得到执行。被调哦那个的js代码可以返回一个值，这个值将被传递给那个时间处理函数，并让这个处理函数出发的js代码返回布尔值true或false。如果返回的时true，onclick时间处理函数九认为"这个链接被点击了"；反之，如果返回的值时false，onclick时间处理函数就认为"这个链接没有被点击"。因此，return false;可以防止用户被带到目标链接窗口。

nodeType属性

node.nodeType获取节点的nodeType属性。
nodeType属性总共有12种，期中仅有3种具有实用价值：

  • 元素节点：1
  • 属性节点：2
  • 文本节点：3

替代文本节点

1
2
3
4
5
6
7
8
function showPic(whichpic) {
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  var text = whichpic.getAttribute("title");
  var description = document.getElementById("description");
  description.firstChild.nodeValue = text;
}

这里我们通过firstChild来渠道<p>元素节点的文本节点。如果该元素节点有包含文本的话，那么该元素的firstChild就为文本节点，否则时其他（元素）节点。

  • node.nodeValue: 取文本节点的值
  • node.firstChild: 等价于node.childNodes[0]
  • node.lastChild: 等价于node.childNodes[node.childNodes.length-1]