摘要：
js的事件機制：
當我們的行爲動作滿足了一定的條件後，會觸發某類事務的執行。
1、單雙擊事件
單擊：onclick 當鼠標單擊的時候會觸發
雙擊：ondblclick 當鼠標雙擊的時候會被觸發
2、鼠標事件
onmouseover 當鼠標懸停在某個HTML元素上的時候觸發
onmousemove 當鼠標在某個HTML元素上移動的時候觸發
onmouseout 當鼠標在某個HTML元素上移出的時候觸發
3、鍵盤事件
onkeyup 當鍵盤在某個HTML元素上彈起的時候觸發
onkeydown 當鍵盤在某個HTML元素上下壓的時候觸發
4、焦點事件
onfocus 當某個HTML元素獲取焦點的時候觸發
onblur 當某個HTML元素失去焦點的時候觸發
5、頁面加載事件
onload 當頁面加載成功後觸發。
注意:
js中添加事件的第一種方式：
在HTML上直接使用事件屬性進行添加，屬性值爲所監聽執行的函數。
js中的事件只有在當前HTML元素上有效。
一個HTML元素可以添加多個不同的事件。
一個事件可以監聽觸發多個函數的執行,但是不同的函數要使用分號間隔
<html>
<head>
<title>js的事件機制學習</title>
<meta charset="UTF-8"/>
<!--聲明js代碼域-->
<script type="text/javascript">
/*聲明js函數*/
//單擊事件
function testOnclick(){
alert("我是單擊");
}
//測試雙擊
function testOndblclick(){
alert("我是雙擊");
}
//鼠標事件
function testOnmouseover(){
alert("我是鼠標懸停事件");
}
function testOnmousemove(){
alert("我被移動了");
}
function testOnmouseout(){
alert("我被移出了");
}
//鍵盤事件
function testOnkeyup(){
alert("我是鍵盤彈起事件");
}
function testOnkeydown(){
alert("我是鍵盤按下事件");
}
//焦點事件
function testOnfocus(){
document.getElementById("showdiv").innerHTML="哈哈";
}
function testOnblur(){
alert("我是失去焦點事件");
}
//頁面加載
function testOnload(){
alert("我是頁面加載事件");
}
//測試
function test(){
alert("測試一個事件的多個函數執行");
}
</script>
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px;
}
</style>
</head>
<body onload="testOnload()">
<h3>js的事件機制學習1</h3>
<hr />
<input type="button" name="" id="" value="測試單擊" onclick="testOnclick();test();" />
<input type="button" name="" id="" value="測試雙擊" ondblclick="testOndblclick();" />
<hr />
<br /><br />
<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()">
</div>
<hr />
鍵盤事件學習： <br />
鍵盤彈起事件：<input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/><br /><br />
鍵盤下壓事件： <input type="text" name="" id="" value="" onkeydown="testOnkeydown()"/>
<hr />
焦點事件學習：<br />
獲取焦點： <input type="text" name="" id="" value="" onfocus="testOnfocus()" onblur="testOnblur()"/><br /><br />
失去焦點： <input type="text" name="" id="" value="" onblur="testOnblur();"/>
</body>
</html>
1、給合適的HTML標籤添加合適的事件
onchange----select下拉框
onload------body標籤
單雙擊-------用戶會進行點擊動作的HTML元素
鼠標事件------用戶會進行鼠標移動操作的。
鍵盤事件------用戶會進行鍵盤操作的HTML元素。
2、給HTML元素添加多個事件時，注意事件之間的衝突
舉個栗子：單擊和雙擊
當事件的觸發條件包含相同部分的時候，會產生事件之間的衝突。
3、事件的阻斷
當事件所監聽的函數的將返回值返回給事件時：
false：則會阻斷當前事件所在的HTML標籤的功能
true:則繼續執行當前事件所在的HTML標籤的功能
4、超鏈接調用js函數
<a href="javascript:函數名()">調用js函數</a>
<html>
<head>
<title>js的事件機制二</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//值改變事件
function testOnchange(){
alert("我被改變了");
}
//單擊事件
function testOnclick(){
alert("今天天氣真好，不冷不熱，賊適合學習");
}
//雙擊事件
function testOndblclick(){
alert("老師說的對");
}
//事件的阻斷
function testA(){
alert("事件的阻斷");
return true;
}
//超鏈接調用js函數
function testHref(){
alert("我是超鏈接調用");
}
</script>
</head>
<body>
<h3>js的事件機制二</h3>
<hr />
值改變事件: <input type="text" name="" id="" value="" onchange="testOnchange();"/>
<br /><br />
<select name="" id="" onchange="testOnchange();">
<option value="">北京</option>
<option value="">上海</option>
<option value="">廣州</option>
</select>
<hr />
事件的衝突：<br />
<input type="button" name="" id="" value="事件的衝突" onclick="testOnclick()" ondblclick="testOndblclick()"/>
<hr />
事件的阻斷：<br />
<a href="http://www.baidu.com" target="_blank" onclick="return testA()">百度一下</a>
<hr />
超鏈接調用js函數:
<a href="javascript:testHref()">調用js函數</a>
</body>
</html>
（本文來自尚學堂JS視頻）