事件基礎

事件調用方式

1. 在script中調用 2. 在元素中調用事件

滑鼠事件

原始（link）-經過（hover）-激活（active）-通路後（visited）

onmouse -down-up -over-out -move

鍵盤事件

onkeydown

onkeyup

表單事件

onfocus

onblur

onselect（很少用）

單行文本框或多行文本框

onchange

單選框複選框下拉清單選中某項

obj.options[ ]獲得某一個清單項

obj.selectedIndex獲得這個清單項的下标

編輯事件

oncopy 防複制

onselectstart 防選擇

oncontexmenu 防右鍵

頁面事件

onload解析完頁面才執行

onbeforeunload在頁面關閉前執行

事件基礎

滑鼠事件
鍵盤事件
表單事件
編輯事件
頁面事件

事件調用方式

1. 在script中調用

2. 在元素中調用事件

JavaScript-事件基礎事件基礎

滑鼠事件

原始（link）-經過（hover）-激活（active）-通路後（visited）

onmouse -down-up -over-out -move

<script>
        window.onload = function(){
            var oA = document.getElementsByTagName("a")[0];
            oA.onmousedown=function(){
                oA.style.color="blue";
            };
            oA.onmouseup=function(){
                oA.style.color="black";
            };
            oA.onmouseoverfunction(){
                oA.style.color="red";
            };
        }
    </script>
    <style type="text/css">
        a:link{
            color: green;
        }
        a:hover{
            color:black;
        }
        a:active{
            color: blue;
        }
        a:visited{
            color:red;
        }
    </style>

鍵盤事件

onkeydown

onkeyup

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		window.onload=function(){
			var oTxt = document.getElementById("txt");
			var oNum = document.getElementById("num");
			oTxt.onkeyup=function(){
				var str = oTxt.value;
				oNum.innerHTML = str.length;
			}
		}
	</script>
	<body>
		<input type="text" id="txt"/>
		<div id="">
			字元串的長度為：<span id="num">0</span>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		window.onload=function(){
			var oTxt = document.getElementById("txt");
			var oDiv = document.getElementById("content");
			var myregex = /^[0-9]*$/;
			oTxt.onkeyup=function(){
				if(myregex.test(oTxt.value)){
					oDiv.innerHTML="輸入正确";
				}
				else{
					oDiv.innerHTML="必須輸入數字";
				}
			};
		};
	</script>
	<body>
		<input type="text"  id="txt" />
		<div id="content" style="color: red;">
			
		</div>
	</body>
</html>

表單事件

onfocus

onblur

搜尋框提示文字效果

<input type="text" id="search" placeholder="百度一下，你就知道"/>

oTx.onfocus();擷取焦點

onselect（很少用）

單行文本框或多行文本框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		window.onload=function(){
			var oSearch = document.getElementById("search");
			oSearch.onclick=function(){
				this.select();
			};
		};
	</script>
	<body>
		<input type="text" id="search" value="百度一下，你就知道"/>
	</body>
</html>

onchange

單選框複選框下拉清單選中某項

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		window.onload=function(){
			var oList = document.getElementById("list");
			oList.onchange=function(){
				var link = this.options[this.selectedIndex].value;
				window.open(link);
			}
		};
	</script>
	<body>
		<select id="list">
			<option value="http://www.baidu.com">百度</option>
			<option value="http://www.sina.com">新浪</option>
			<option value="http://www.qq.com">騰訊</option>
		</select>
	</body>
</html>

obj.options[ ]獲得某一個清單項

obj.selectedIndex獲得這個清單項的下标

編輯事件

oncopy 防複制

onselectstart 防選擇

oncontexmenu 防右鍵

document.oncopy=function( ){
            return false;
            }

頁面事件

onload解析完頁面才執行

onbeforeunload在頁面關閉前執行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		window.onload=function(){
			alert('歡迎光臨');
		}
		window.onbeforeunload = function(e){
			e.returnValue ="記得下次再來喔";
		}
	</script>
	<body>
	</body>
</html>

JavaScript-事件基礎事件基礎

事件基礎

事件調用方式

1. 在script中調用 2. 在元素中調用事件

滑鼠事件

原始（link）-經過（hover）-激活（active）-通路後（visited）

onmouse -down-up -over-out -move

鍵盤事件

onkeydown

onkeyup

表單事件

onfocus

onblur

onselect（很少用）

單行文本框或多行文本框

onchange

單選框複選框下拉清單選中某項

obj.options[ ]獲得某一個清單項

obj.selectedIndex獲得這個清單項的下标

編輯事件

oncopy 防複制

onselectstart 防選擇

oncontexmenu 防右鍵

頁面事件

onload解析完頁面才執行

onbeforeunload在頁面關閉前執行

繼續閱讀

1. 在script中調用

2. 在元素中調用事件