js中常用的事件，onclick 單擊事件、onblur 失去焦點事件、onchange改變事件、onmouseover滑鼠進入事件、onmouseout滑鼠移除事件、onsubmit提交事件
onclick 單擊事件
onblur 失去焦點事件
onchange 當物件或選中區的內容改變時觸發。
onmouseover 當用戶將滑鼠指標移動到物件內時觸發。
onmouseout 當用戶將滑鼠指標移出物件邊界時觸發。
1、靜態點選事件
<script type="text/javascript">
// A標籤的點選事件
function aClick(){
alert("A標籤被點選了");
}
// div塊標籤的點選事件
function divClick(){
alert("div標籤被點選了");
}
// 文字輸入框的點選事件
function inputClick(){
alert("文字輸入框被點選了");
}
</script>
</head>
<body>
<a href="#" onclick="aClick();">單擊事件</a>
<div style="width: 50px;height: 50px; background-color: red;" onclick="divClick();">塊標籤</div>
<input type="text" onclick="inputClick()"
</body>
2、動態的給html標籤物件新增物件<script type="text/javascript">
// 動態事件註冊
// 當整 個檔案 被載入完成之後自動呼叫
window.onload = function() {
// 2.通過document物件getElementById方法查詢到標籤物件
var aObj = document.getElementById("a001");
//alert(aObj);
// 3.給這個物件的事件賦值
aObj.onclick = function() {
alert("用心學習");
}
//通過div標籤的id屬性值，查詢到對應的div標籤dom物件
var divObj = document.getElementById("div001");
//alert(divObj);
// 給div物件的單擊事件賦值
divObj.onclick = function() {
alert("不要睡覺");
}
// 通過標籤的name屬性查詢到對應的input標籤物件
var inputObjs = document.getElementsByName("username");
//alert(inputObjs.length);
//inputObjs[0].onclick = function() {
//alert("輸入框點選了");
//}
// 迴圈遍歷給每一個標籤物件的單擊事件賦值
for (var i = 0; i < inputObjs.length; i++) {
inputObjs[i].onclick = function(){
alert("輸入框點選了");
}
}
// 通過html標籤名查詢到所有對應的html標籤物件
var inputObj2 = document.getElementsByTagName("input");
//alert(inputObj2.length);
// 迴圈遍歷。每一個input標籤物件。給單擊事件賦值
for (var i = 0; i < inputObj2.length; i++) {
inputObj2[i].onclick = function(){
alert("輸入框點選了");
}
}
}
</script>
</head>
<body>
<a id="a001" href="#" >單擊事件</a>
<div id="div001" style="width: 50px;height: 50px; background-color: red;">塊標籤</div>
<input type="text" />
<input type="text" />
</body>
3、失去焦點事件<script type="text/javascript">
// 定義一個失去焦點的javaScript函式
function inputOnBlur() {
alert("文字框失雲焦點");
}
</script>
</head>
<body>
<!-- 以靜態事件註冊 的方式 給input標籤新增，失去焦點事件 -->
使用者名稱:<input type="text" onblur="inputOnBlur();" />
</body>
4、改變事件<script type="text/javascript">
// 下拉列表改變事件
function selectChange(){
alert("改變了");
}
</script>
</head>
上面頭，下面身體
<body>
<!-- 以靜態註冊方式，給下拉列表新增選擇改變的事件 -->
省份：<select onchange="selectChange();">
<option>海南省</option>
<option>廣東省</option>
<option>河南省</option>
</select>
5、滑鼠進來事件<script type="text/javascript">
// 動態事件第一步，千萬要先註冊這個文件被載入完成之後的事件
window.onload = function() {
var divObj = document.getElementById("div001");
// alert(divObj);
// 動態給div標籤新增滑鼠移入事件
divObj.onmouseover = function() {
alert("滑鼠 進來 了");
}
}
</script>
</head>
<body>
<div id="div001" style="width: 100px;height: 100px; background-color: red;">塊標籤</div>
</body>
6、滑鼠移除事件<script type="text/javascript">
// 定義一個滑鼠 移動的函式
function divOut(){
alert("滑鼠 出去了");
}
</script>
</head>
<body>
<div id="div001" onmouseout="divOut();" style="width: 100px;height: 100px; background-color: red;">塊標籤</div>
</body>
7、表單提交頁面<script type="text/javascript">
// 表單提交事件
function invalidate() {
alert("驗證表單資料");
return false;
}
</script>
</head>
<body>
<form action="http://127.0.0.1:8080" method="get" onsubmit="return invalidate();">
使用者名稱:<input name="username" type="text" /><br />
<input type="submit" />
</form>
</body>