事件（JavaScript中的事件）
事件的型別
事件的定義
指的是文件或者瀏覽器視窗中發生的一些特定互動瞬間。我們可以通過偵聽器（或者處理程式）來預定事件，以便事件發生的時候執行相應的程式碼。
事件型別
事件型別是一個用來說明發生什麼型別事件的字串。像滑鼠懸浮，按下鍵盤等。
事件目標
事件目標是發生的事件或與之相關的物件。當講事件時，我們必須同時指定型別和目標。像 window 上的 load 事件或者連結的 click 事件。
事件處理程式或事件監聽程式
我們使用者在頁面中進行的點選這個動作，滑鼠移動的動作，網頁頁面載入完成的動作等，都可以稱之為事件名稱，即：click、mousemove、load 等都是事件的名稱。
響應某個事件的函式則稱為事件、處理程式，或者叫做事件偵聽器。
事件物件
事件物件是與特定事件相關且包含有關該事件詳細資訊的物件。事件物件作為引數傳遞給事件處理程式函式。
所有的事件物件都有用來指定事件型別的 type 屬性和指定事件目標的 target 屬性。每個事件型別都為其相關的事件物件定義一組屬性。
事件傳播
事件傳播是瀏覽器決定那個物件觸發其事件處理程式的過程
事件模型
內聯模型
這種模型是最傳統接單的一種處理事件的方法。在內聯模型中，事件處理函式是 HTML 標籤的一個屬性，用於處理指定事件。
雖然內聯在早期使用較多，但它是和 HTML 混寫的，並沒有與 HTML 分離。
指令碼模型
由於內聯模型違反了 HTML 與 JavaScript 程式碼層次分離的原則。為了解決這個問題，我們可以在 JavaScript 中處理事件。
這種處理方式就是指令碼模型。
DOM2 模型
“DOM2 級事件”定義了兩個方法，用於新增事件和刪除事件處理程式的操作：
addEventListener()， removeEventListener()。所有 DOM 節點中都包含這兩個方法，並且它們都接受 3 個引數；事件名、函式、冒泡或捕獲的布林值(true 表示捕獲，false 表示冒泡)。
傳統的事件型別
滑鼠事件
HTML文件的head部分的JavaScript程式碼
<script type="text/javascript">
//滑鼠事件
/* onclick: 單擊事件 僅滑鼠左鍵按下
ondblclick: 雙擊事件
onmouseenter: 滑鼠懸浮
onmouseover: 滑鼠懸浮
onmousedown: 滑鼠按鈕被按下 滑鼠左右鍵皆可
onmouseleave: 滑鼠離開
onmouseout: 滑鼠離開
onmouseup: 滑鼠按鍵被鬆開
onmousemove: 滑鼠移動
onmousewheel: 滑鼠滑輪事件 */ body中的程式碼塊
<button class="div1">滑鼠單擊</button>
<button class="div1">滑鼠雙擊</button>
<button class="div1">滑鼠懸浮(onmouseenter)</button>
<button class="div1">滑鼠懸浮(onmouseover)</button>
<button class="div1">滑鼠按鈕被按下</button>
<button class="div1">滑鼠離開(onmouseleave)</button>
<button class="div1">滑鼠離開(onmouseout)</button>
<button class="div1">滑鼠按鍵被鬆開</button>
<button class="div1">滑鼠移動</button>
<button class="div1">滑鼠滑輪事件</button>
鍵盤事件
keydown：按鍵按下
keyup：按鍵擡起
keypress：按鍵按下擡起
body中的程式碼塊
input id="name" type="text" onkeydown="myKeyDown()" onkeyup="myKeyUp()">
HTML文件的head部分的JavaScript程式碼
// keydown：按鍵按下
// keyup：按鍵擡起
/*輸出輸入的字元*/
function myKeyDown() {
console.log(document.getElementById('name').value);
}
/*按鍵結束，字型轉換為大寫*/
function myKeyUp() {
var text1 = document.getElementById('name').value;
document.getElementById('name').value = text1.toUpperCase();
}
事件物件 Event
JavaScript的Event物件用來描述JavaScript事件，Event代表事件狀態，如事件發生的元素，鍵盤狀態，滑鼠位置和滑鼠按鈕狀態。一旦事件發生，便會生成Event物件，如單擊一個按鈕，瀏覽器的記憶體中就產生相應的event物件。
Event物件的主要屬性和方法、
Event是JavaScript的重要事件，event代表事件的狀態，專門負責對事件的處理，其屬性和方法能幫助使用者完成很多和使用者互動的操作。
type：事件的型別，就是HTML標籤屬性中，沒有on字首之後的字串，例如Click就代表單擊事件。
srcElement：事件源，就是發生事件的元素
button:聲明瞭被按下的滑鼠鍵，是一個整數。0代表沒有按鍵，1代表滑鼠左鍵，2代表滑鼠右鍵，4代表滑鼠的中間鍵，如果按下了多個滑鼠鍵，就把這些值加在一起，所以3就代表左右鍵同時按下。
clientX/clientY：是指事件發生的時候，滑鼠的橫縱座標，返回的是整數，它們的值是相對於包容視窗的左上角生成的。
offsetX/offsetY：滑鼠指標相對於源元素位置，可確定單擊image物件的哪個畫素。
altKey，ctrlKey，shiftKey:指滑鼠事件發生時，是否同時按住了Alt，Ctrl或者shift鍵，返回一個布林值。
keyCode：返回keydown和keyup事件發生時，按鍵的程式碼以及keypress事件的Unicode字元。
//JavaScript程式碼塊
window.onload=function(){
var text1=document.getElementById('txt1');
text1.onkeypress=function(event){
alert(event.keyCode);
}
}
//body中的程式碼
<input type="text" id="txt1" />
fromElement、toElement:前者是指mouseover事件移動過的文件元素，後者指在mouseout事件中滑鼠移動到的文件元素。
表單事件
onsubmit 提交事件
onfocus 獲取焦點事件
onblur 失去焦點事件
提交事件例子
<!--JavaScript程式碼塊-->
<script type="text/javascript">
window.onload=function(){
//獲取form表單,從而新增提交事件
var form=document.getElementById('form1');
// form.onsubmit=function(){
// //表示通過name獲取表單元素的值
// var name=document.form1.text1.value;
// alert(name);
//
// }
document.getElementById('form1').onsubmit=function(){
var name=document.form1.text1.value;
alert(name);
}
}
</script>
<!--body中的程式碼-->
<body>
<form name="form1" action="" method="post" id="form1">
<input type="text" value="" name="text1" />
<br />
<input type="submit" name="submit_01" value="提交"/>
</form>
</body>
獲取焦點和失去焦點例子
<!--JavaScript程式碼塊-->
<script type="text/javascript">
//問題:滑鼠離開(失去焦點事件)文字框1的時候,將其文字框值轉換為大寫
//onblur: 表示的是失去焦點事件
function blur_01(value){
// alert(value);
//函式之間的呼叫
TextUpperCase(value); //在一個函式中呼叫另外的一個函式
}
//以下這個函式是用來轉換為大寫的函式
function TextUpperCase(value){
document.write(value.toUpperCase());
}
function focus_01(color){
// document.getElementById('fname').style.background=color;
var color1=document.getElementById('fname');
color1.style.background=color;
}
</script>
<!--body中的程式碼-->
<!--blur_01(this.value): this指向的是事件的目標 在這裡是第一個input文字框-->
<p>請輸入你的英文名字:
<input type="text" id="fname" onfocus="focus_01('skyblue');" onblur="blur_01(this.value)">
</p>
<p>請輸入你的年齡:
<input type="text" id="age">
</p>
2018年12月13日17:55:05