JavaScript進階（一）JS事件機制
前言
做了這麼久的鋪墊，終於迎來了新的篇章，該章介紹JS中的事件機制
方法
1.概念
我們知道，JS是參與網頁互動的一門指令碼語言，之前所說的都是JS的基本概念，那麼怎麼來進行互動呢！那就需要JS的事件機制來進行控制了，如按鈕的點選事件觸發JS函式等等
2.常用的事件
1）、單雙擊事件
單擊：onclick 當滑鼠單擊的時候會觸發
雙擊：ondblclick 當滑鼠雙擊的時候會被觸發
範例：按鈕元素新增單雙擊事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS事件</title> <script type="text/javascript"> function change(){ alert("我是一個函式"); } </script> </head> <body> <input type="button" name="" id="" value="單擊事件" onclick="change();" /> <input type="button" name="" id="" value="雙擊事件" ondblclick="change();" /> </body> </html>
2）、滑鼠事件
onmouseover 當滑鼠懸停在某個HTML元素上的時候觸發
onmousemove 當滑鼠在某個HTML元素上移動的時候觸發
onmouseout 當滑鼠在某個HTML元素上移出的時候觸發
範例：設定滑鼠懸停事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS事件</title>
<script type="text/javascript">
function change1(){
alert("我是紅色");
}
function change2(){
alert("我是綠色");
}
</script>
</head>
<body>
<div id="left" style="width: 100px;height: 100px;float: left;background-color: red;" onmouseover="change1();">
</div>
<div id="right" style="width: 100px;height: 100px;float: left;background-color: green;" onmouseover="change2();">
</div>
</body>
</html>
3）、鍵盤事件
onkeyup 當鍵盤在某個HTML元素上彈起的時候觸發
onkeydown 當鍵盤在某個HTML元素上下壓的時候觸發
範例：設定按下鍵盤事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS事件</title>
<script type="text/javascript">
function change(){
alert("按下鍵盤");
}
</script>
</head>
<body>
使用者名稱：<input type="text" id="" value="" onkeydown="change();"/>
</body>
</html>
4）、焦點事件
onfocus 當某個HTML元素獲取焦點的時候觸發
onblur 當某個HTML元素失去焦點的時候觸發
範例：設定input文字框失去焦點觸發事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS事件</title>
<script type="text/javascript">
function change(){
alert("離開焦點");
}
</script>
</head>
<body>
使用者名稱：<input type="text" id="" value="" onblur="change();"/>
</body>
</html>
5）、頁面載入事件
onload 當頁面載入成功後觸發。
範例：頁面載入成功後獲取input文字框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS事件</title>
<script type="text/javascript">
function change(){
alert(document.getElementById("test").value);
}
</script>
</head>
<body onload="change();">
使用者名稱：<input type="text" id="test" value="張三" />
</body>
</html>
要點：
js中新增事件的第一種方式：
在HTML上直接使用事件屬性進行新增，屬性值為所監聽執行的函式。
js中的事件只有在當前HTML元素上有效。
一個HTML元素可以新增多個不同的事件。
一個事件可以監聽觸發多個函式的執行,但是不同的函式要使用分號間隔
3.合適的標籤新增合適的事件
我們知道，我們的事件可以新增到html的各個元素上!
但是，我們不能隨意的去新增，約定俗成的事件新增規則如下：
1）、給合適的HTML標籤新增合適的事件
onchange----select下拉框
onload------body標籤
單雙擊-------使用者會進行點選動作的HTML元素
滑鼠事件------使用者會進行滑鼠移動操作的。
鍵盤事件------使用者會進行鍵盤操作的HTML元素。
2）、給HTML元素新增多個事件時，注意事件之間的衝突
舉個栗子：單擊和雙擊
當事件的觸發條件包含相同部分的時候，會產生事件之間的衝突。
3）、事件的阻斷
當事件所監聽的函式的將返回值返回給事件時：
false：則會阻斷當前事件所在的HTML標籤的功能
true:則繼續執行當前事件所在的HTML標籤的功能
4）、超連結呼叫js函式
<a href="javascript:函式名()">呼叫js函式</a>
請讀者自行理解我上面說的意思！切身體會JS的事件機制！