<HeadFirst_HTML5> O'REILLY_Chap.3_事件_处理程序

<HeadFirst_HTML5> O’REILLY_Chap.3_事件_处理程序

本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.

FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.

FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.

FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.

感谢<HeadFirst_HTML5>作者 Eric Freeman & Elisabeth Robson
感谢<HeadFirst_HTML5>翻译 林琪 张伶

正文

原文

BULLTE POINTS(要点):

• 你的浏览器中一直在发生很多事件. 如果你想对这些事件做出响应, 就要用事件处理程序来处理这些事件.

• 点击Web页面上的一个按钮是会触发按钮点击事件.

• 处理一个按钮点击事件时, 要注册一个函数来处理这个事件. 要做到这一点, 需要编写一个函数, 并把按钮的 onclick 属性设置为这个函数名.

• 如果注册了一个按钮点击事件处理程序, 点击这个按钮就会调用这个函数.

• 要编写函数代码作为处理程序对按钮点击事件做出响应. 可以提醒用户或者新页面, 也可以做其他响应.

• 要得到用户在一个表单输入文本域中输入的文本, 要使用这个输入域的 value 属性.

• 如果用户没有向表单输入文本域输入任何内容, 这个域的值将是空串(“”).

• 可以用一个 if 测试和 == 来比较变量和空串是否相等.

• 要把一个新元素增加到DOM, 首先需要创建这个元素, 然后增加这个元素作为某个元素的子元素.

• 使用 document.createElement 可以创建一个新元素. 将标记名(例如: “li”)传入函数调用, 只是要创建的元素.

• 要在DOM中增加一个元素作为某个父元素的子元素, 需要得到这个父元素的引用, 并对父元素调用 appendChild 传入要增加的子元素.

• 如果使用 appendChild 向一个父元素增加多个子元素, 每个新的子元素会追加到其他子元素的后面, 所以它们会出现在页面中其他子元素的后面或下面(假设没有用CSS改变页面布局).

• 可以使用Web存储API( localStorage ) 在用户的浏览器中存储数据.