重要！常見事件介紹：http://www.ido321.com/1327.html
英文版：http://tw.newtonstudio.com/?p=59
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03eventHandlerFocusBlur.html</title>
<script>
window.onload = function () {
document.getElementById("idinput").onchange = change;
//onchang：元素失去焦點並且元素內容改變時觸發，所以欄位內容被改寫時會觸發
document.getElementById("idinput").onblur = blur;
//onblur：元素失去焦點時觸發，所以游標離開欄位後背景變黃色
document.getElementById("idinput").onfocus = focus;
//onfocu：元素獲得焦點時觸發，所以點擊欄位時背景變綠色
}
function change() {
document.fgColor = "red";//把螢幕上的「字」(非欄位內的字)改為紅色
document.getElementById("idinput").style.color = "blue";//把id="idinput"欄位內的字改為藍色
//物件document.getElementById("idinput")的顏色改為藍色
}
function blur() {//把背景background-color改為黃色
document.bgColor = "yellow";}
function focus() {//把背景background-color改為綠色
document.bgColor = "green";
}
</script>
</head>
<body>
<input type="text" id="idinput" value="click here change bgColor" />
<h1>this is h1</h1>
<hr />
name:<input type="text" id="idName" />
<span id="idsp"></span>
<br />
password:<input type="password" id="idPwd" />
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>04eventHandlerMouseoverout.html</title>
<script>
window.onload = function () {
document.getElementById("idimg").onmouseover = mouseover;
//onmouseover：鼠標的光標移動到某對像上時觸發
document.getElementById("idimg").onmouseout = mouseout;
//onmouseout：鼠標光標離開某對像時觸發
}
function mouseover() {
document.getElementById("idimg").src = "Images/chngstar.gif";
}
function mouseout() {
document.getElementById("idimg").src = "Images/star.gif";
}
</script>
</head>
<body>
<img id="idimg" src="Images/star.gif" />
</body>
</html>
留言列表
【前端網頁開發技術】 (4)
