HTML5总结-事件、处理程序（交互）

显示页面时，浏览器中会发生很多事情：用户点击按钮、代码从网络请求的额外数据会到达、定时器可能到期。即按钮点击事件、数据到达事件、时间到期事件。

---

表单填写：

         

         

为按钮指定一个事件：

var button = document.getElementById("addButton");

button.onclick = handleButtonClick;

取得表单域中输入的文本：

var textInput = document.getElementById("songTextInput");

var songName = textInput.value;

创建一个新元素：

var li = document.createElement("li");//传入createElement的li是元素的类型

li.innerHTML = songName;//给li元素增加文本内容

向DOM增加新元素：

var ul = document.getElementById("playlist");

ul.appendChild(li);//让ul增加li元素作为它的一个子元素

本地存储音乐播放清单：

localStorage.setItem("playlist", JSON.stringify(playlistArray));

本地存储中取出播放清单：

function getStoreArray(key) {

         var playlistArray = localStorage.getItem(key);

         if (playlistArray == null || playlistArray == "") { playlistArray = new Array(); }

         else {  playlistArray = JSON.parse(playlistArray); }

          return playlistArray；}//  {}的格式完全是为了节省版面，勿参考

---

相关源码：

playlist.js

playlist_store.js

---

彩蛋-浏览器中查看/编辑本地存储的cookie

步骤：

键 -> Application -> Storage - localStorage - file:// ，即可查看键值对

右键点击 键值对 的“value”，即可删除/修改本地存储的键值对

chrome中本地存储的键值对

---

TIPS：本文只是个人对过去的总结，不保证简洁性、系统性、易懂性。如需交流：zhejiangdaxue2011(微信号）