JavaScript事件处理

2016-03-22 本文已影响55人刘涤生

了解了JavaScript的基础知识后，开始处理HTML5与用户的交互。如果页面能响应用户的输入，它们就不再知识文档，而是有生命的、有反应的应用了。

接下来我们开始学习JavaScript事件处理，这里通过一个添加音乐播放列表示例来描述JavaScript与用户的交互过程。效果图如下：

效果.png

添加一首音乐到列表的步骤主要有四步：

创建HTML页面

playlist.html

<!DOCTYPE HTML>
<html>
<head>
    <title>iTunes</title>
    <meta charset="utf-8">
    <script src="playlist.js"></script>
    <!--播放列表的样式表-->
    <link rel="stylesheet" href="playlist.css">
</head>
<body>
    <form>
        <!--
            type:控件类型
            id:
            placeholder:显示一个例子，指示这个输入域中要输入什么
    -->
        <input type="text" id = "songTextInput" size = "40" placeholder="Song name">
        <input type="button" id="addButton" value="Add song">
    </form>
    <!--ul是一个列表-->
    <ul id="playlist">
</body>
</html>

样式playlist.css代码为

/* playlist.css */

body {
    font-family: arial, sans-serif;
}

ul#playlist {
    border: 1px solid #a9a9a9;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 10px;
    padding: 0px;
    list-style-type: none;
}

ul#playlist li {
    border-bottom: 1px solid #a9a9a9;
    padding: 10px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e3e3e3));
    background-image: -moz-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: -ms-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: -o-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: -webkit-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: linear-gradient(#f9f9f9, #e3e3e3);
}

ul#playlist li:last-child {
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom: none;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
ul#playlist li:first-child {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

如上述代码，head头里面加载了一个JavaScript文件playlist.js和一个播放列表样式playlist.css，body体里面包含一个form表单和一个ul列表，其中form表单包含一个文本类型和按钮类型的控件。

处理点击事件

处理点击事件的步骤：

1.获取id为addButton控件的元素
2.为该元素关联点击事件
3.实现点击事件

window.onload = init;

function init() {

    //1
    var button = document.getElementById('addButton');
    <!--设置点击事件-->
    //2
    button.onclick = handleButtonClick;
}

//3
function handleButtonClick() {

    alert("Button was clicked!");
}

获得歌曲名

步骤:

1.获得id为songTextInput的元素
2.获得该元素的值

window.onload = init;

function init() {

    var button = document.getElementById('addButton');
    <!--设置点击事件-->
    button.onclick = handleButtonClick;
//    loadPlaylist();
}

function handleButtonClick() {
    //1.
    var textInput = document.getElementById('songTextInput');
    //2.
    var songname = textInput.value;
}

添加歌曲到列表

步骤:

1.创建一个新的<li>元素
2.将新元素的内容设置为歌曲名
3.将新元素添加到id为playlist的列表

playlist.js

window.onload = init;

function init() {

    var button = document.getElementById('addButton');
    <!--设置点击事件-->
    button.onclick = handleButtonClick;
}

function handleButtonClick() {

    var textInput = document.getElementById('songTextInput');
    var songname = textInput.value;
    //1
    var li = document.createElement("li");
    //2.
    li.innerHTML = songname;
    //3.
    var ul = document.getElementById("playlist");
    ul.appendChild(li);

}

持久保存歌曲列表

持久保存就是讲歌曲列表保存在本地，当浏览器再次打开HTML5的页面时，就会加载本地的列表显示到页面。

首先，建立一个新文件，list_store.js,代码如下:


//保存数据到本地
function save(item) {
    var playlistArray = getStoreArray("playlist");
    playlistArray.push(item);
    localStorage.setItem("playlist",JSON.stringify(playlistArray));
}

//加载本地数据
function loadPlaylist() {
    var playlistArray = getSavedSongs();
    var ul = document.getElementById('playlist');
    if (playlistArray != null) {
        for(var i = 0; i < playlistArray.length;i++) {
            var li = document.createElement("li");
            li.innerHTML = playlistArray[i];
            ul.appendChild(li);
        }
    }
}

function getSavedSongs() {
    return getStoreArray("playlist");
}

function getStoreArray(key) {
    var playlistArray = localStorage.getItem(key);
    if (playlistArray == null || playlistArray == "") {
        playlistArray = new Array();
    } else {
        playlistArray = JSON.parse(playlistArray);
    }

    return playlistArray;
}

然后在playlist.js中加入两行代码

window.onload = init;

function init() {

    var button = document.getElementById('addButton');
    <!--设置点击事件-->
    button.onclick = handleButtonClick;
    loadPlaylist(); //加载数据
}

function handleButtonClick() {

    var textInput = document.getElementById('songTextInput');
    var songname = textInput.value;

    var li = document.createElement("li");
    li.innerHTML = songname;

    var ul = document.getElementById("playlist");
    ul.appendChild(li);
    save(songname); //保存数据
}

最后，在HTML的head元素中增加一个指向list_store.js的引用，增加到playlist.js的上面

<script src="list_store.js"></script>
<script src="playlist.js"></script>

重新加载页面，输入一些歌曲。退出浏览器，再次打开浏览器，并加载这个页面，你会看到存储的所有歌曲都安全地出现在播放列表中。