事件

事件
　　背景：
　　　　由於JavaScript在瀏覽器中以單線程模式運行。頁面加載後，一旦頁面上全部的JavaScript代碼被執行完後，就只能依賴觸發事件來執行JavaScript代碼。
　　　	瀏覽器在接收到用戶的鼠標或鍵盤輸入後，會自動在對應的DOM節點上觸發相應的事件。若是該節點已經綁定了對應的JavaScript處理函數，該函數就會自動調用。
        因爲不一樣的瀏覽器綁定事件的代碼都不太同樣，因此用jQuery來寫代碼，就屏蔽了不一樣瀏覽器的差別，咱們老是編寫相同的代碼

爲何要事件：
　　處理用戶操做，鼠標點擊，鍵盤輸入

事件類型：3種
　　1.鼠標事件

　  2.鍵盤事件
　　　　鍵盤事件僅做用在當前焦點的DOM上，一般是<input>和<textarea>。
　　　　兩個鍵一塊兒按時
　　　　if (e.ctrlKey && e.keyCode == 10) {
　　　　　　alert("發送");
　　　　}
		事件參數
		　　有些事件，如mousemove和keypress，咱們須要獲取鼠標位置和按鍵的值，不然監聽這些事件就沒什麼意義了。
		　　全部事件都會傳入Event對象做爲參數，能夠從Event對象上獲取到更多的信息：
		　　$(function () {
		　　　　$('#testMouseMoveDiv').mousemove(function (e) {
		　　　　　　$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
		　　　　});
		　　});


　　3.其餘事件
　　　　focus：當DOM元素得到焦點時觸發；
　　　　blur：當DOM元素失去焦點時觸發；
　　　　change：當<input>、<select>或<textarea>的內容改變時觸發；
　　　　submit：當<form>提交時觸發；
　　　　ready：頁面加載完成後觸發。
　　　　	其中，ready僅做用於document對象。因爲ready事件在DOM完成初始化後觸發，且只觸發一次，因此很是適合用來寫其餘的初始化代碼
　　　　	因爲ready事件使用很是廣泛，因此能夠這樣簡化：
	　　　　　　$(document).ready(function () {
	　　　　　　});
　　　　		若是你遇到$(function () {...})的形式，牢記這是document對象的ready事件處理函數。

綁定事件
	function hello() {
　　　　alert('hello!');
　　}
　　a.click(hello); // 綁定事件

取消綁定（jquery）
　　a.off('click', function) 解除綁定　

　　// 10秒鐘後解除綁定:
　　setTimeout(function () {
　　　　a.off('click', hello);
　　}, 10000);
　　須要特別注意的是，下面這種寫法是無效的：

　　// 綁定事件:
　　　　a.click(function () {
　　　　　　alert('hello!');
　　　　});

　　// 解除綁定:
　　　　a.off('click', function () {
　　　　　　alert('hello!');
　　　　});
　　這是由於兩個匿名函數雖然長得如出一轍，可是它們是兩個不一樣的函數對象，off('click', function () {...})沒法移除已綁定的第一個匿名函數。
　　off('click')一次性移除已綁定的click事件的全部處理函數。
　　無參數調用off()一次性移除已綁定的全部類型的事件處理函數。

事件觸發條件
　　事件觸發者：用戶
　　var input = $('#test-input');
　　input.change(function () {
　　　　console.log('changed...');
　　});
　　當用戶在文本框中輸入時，就會觸發change事件。
　　用JS代碼去改動文本框的值，將不會觸發change事件：
　　　　var input = $('#test-input');
　　　　input.val('change it!'); // 沒法觸發change事件
　　　　input.change(); // 觸發change事件
　　　　　　有些時候，咱們但願用代碼觸發change事件，能夠直接調用無參數的change()方法來觸發該事件

事件傳播機制
　　分2個階段：
　　　　一、捕獲事件階段
　　　　二、事件冒泡階段

冒泡階段
　　用"btn.oncklick"綁定事件處理函數，該事件是在冒泡階段發生的

捕獲事件階段
　　用「 window.addEventListener()」綁定事件處理函數，能夠在捕獲階段觸發事件
　　// DOM2級綁定事件 
　　// addEventListener(事件名稱,事件回調函數,是否捕獲)
　　// 第三個參數 true表示捕獲階段綁定 false表示冒泡階段 默認值也是false

事件委託（事件代理）
　　當前事件源，委託祖先作某些事情（根據冒泡原理）


事件對象：
　　事件觸發後會產生一個事件對象，包含事件信息
　　　　document.onmousemove = function(e) {
　　　　　　var e = e || window.event;//e就是事件對象，
　　　　}
事件冒泡
　　e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
　　return false; // 阻止瀏覽器的默認行爲