事件与处理程序

最新推荐文章于 2024-07-30 10:56:44 发布

BugsAroundMe

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量532

点赞数

分类专栏： HTML5 & javascript 文章标签：事件处理 javascript

本文链接：https://blog.csdn.net/u010392792/article/details/25973057

版权

HTML5 & javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

以播放器列表管理器为例：

webvilli.htm

<!doctype html>
<html lang="en">
<head>
<title>Webville Tunes</title>
<meta charset="utf-8">
<link rel="icon" 
      type="image/ico" 
      href="http://wickedlysmart.com/favicon.ico">
<script src="playlist.js"></script>
<script src="playlist_store.js"></script>
<link rel="stylesheet" href="playlist.css">
</head>
<body>
<!--表单，有一个文本域，用来输入歌曲名-->
<!--placeholder属性，暗示input-->
<form>
<input type="text" id="songTextInput" size="40" placeholder="Song name">
<input type="button" id="addButton" value="Add Song">
</form>
<!--使用一个列表存放歌曲，目前为空-->
<ul id="playlist">

</ul>

</body>
</html>

/* playlist.js */

window.onload = init;

function init() {
	var button = document.getElementById("addButton");
	button.onclick = handleButtonClick;

	loadPlaylist();
}

function handleButtonClick(e) {
	var textInput = document.getElementById("songTextInput");
	var songName = textInput.value;
	//alert("Adding " + songName);
<!--如果用户没有输入，value属性不是null，而是“”，空串-->
	if (songName == "") {
		alert("Please enter a song");
	}
	else {
		//alert("Adding " + songName);
		var li = document.createElement("li");
		li.innerHTML = songName;
		var ul = document.getElementById("playlist");
		ul.appendChild(li);

		// for Ready Bake
		save(songName);
	}
}

/* playlist_store.js
 * 
 * Ready-bake code to store and retrieve playlist items
 */
<!--使用web存储API（localStorage）在用户的浏览器中存储数据-->
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.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;
}

Javascript能处理很多事件，以后慢慢熟悉

但是如果学会一个处理事件，那么所有事件都会处理了