事件：event：瀏覽器自動觸發的或用戶手動觸發的頁面狀態的改變
事件處理函數: 當事件發生時自動調用的函數
當希望在事件發生時，自動調用一個函數，都要在事件發生前，將函數綁定到事件屬性上
如何綁定: 3種:
1、在html中綁定: <ANY on事件名="js語句"
比如: <button onclick="fun()"
問題: 不符合內容與行爲分離的原則，不便於維護！
解決: 在js中動態綁定事件
2、爲事件屬性賦值一個函數:
ANY.on事件名=fun;
強調: 1、fun後不要加()，因爲是回調的一種
2、fun中的this->ANY 事件綁定到的.前的元素對象
問題: 一個事件只能綁定一個處理函數，且不能被remove移除
解決: 用addEventListener
3、addEventListener
ANY.addEventListener("事件名",fun,captrue)
ANY.removeEventListener("事件名",fun)
事件模型: Event模型指的是瀏覽器如何處理髮生的事件
DOM: 3個階段:
1、捕獲: 由外向內，記錄各級父元素上綁定的相同事件
addEventListener("事件",fn,capture)
capture: 是否在捕獲階段提前觸發，默認false
2、目標觸發: 首選觸發目標元素上的事件處理函數
目標元素: 實際觸發事件的元素
3、冒泡: 按照捕獲順序的反向,由內向外，依次觸發各級父元素綁定的事件處理函數
IE8: 2個階段: 沒有捕獲
attachEvent("on事件名",fn);
事件對象: 當事件發生時，自動創建的，封裝所有事件信息的對象
何時: 只要希望操控事件或獲得事件相關數據都要用事件對象
DOM: 事件對象默認作爲事件處理函數的第一個參數傳入
function 處理函數(e){
... e//在事件發生時自動獲得事件對象 ...
}
IE8: 在全局window,定義了一個event
function 處理函數(){
window.event
}
兼容: function 處理函數(e){
e=e||window.event;
}
操作: 取消冒泡: 停止蔓延
DOM: e.stopPropagation();
IE8: e.cancelBubble=true;
兼容: if(e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble=true;
利用冒泡:
優化: 儘量少的添加事件監聽
爲什麼: 瀏覽器在事件發生時，會遍歷所有註冊的事件監聽，監聽越多，遍歷就越慢，網頁響應速度就越慢
解決: 如果多個子元素綁定相同的事件時，只需在父元素集中綁定一次，所有子元素共用即可
難題:
1、如何獲得目標元素
this->隨冒泡向父元素移動
解決: e.target 始終保存目標元素，不隨冒泡改變
2、如何鑑別目標元素是否想要的
解決: 在執行正式操作前，判斷目標元素的特徵
取消事件: 阻止默認行爲
何時: 當事件發生後，不希望事件再執行瀏覽器默認行爲時
如何: e.preventDefault();
典型應用：
1.當用a標記作爲按鈕使用，避免url結尾添加錨點地址，要取消默認行爲
2.在表單的onsubmit事件中，進行最後一次驗證，如果未通過，就取消默認提交
3.H5做拖拽效果時，都要取消默認
<body>
<a href="http://www.baidu.com" id="link">百度</a>
<script>
var link = document.getElementById("link");
link.addEventListener("click", fn, false);
function fn(e) {
e.preventDefault();
//若用return false; 不起作用
//若用link.onclick = function();return false可以阻止
}
</script>
</body>事件座標: 事件發生時，鼠標的位置
e.screenX|e.screenY：鼠標指針相對於屏幕左上角的位置
e.x|e.y：
e.clientX|e.clientY：
e.pageX|e.pageY：鼠標指針相對於文檔左上角的位置
e.layerX|e.layerY：
e.offsetX|e.offsetY：鼠標指針在當前事件元素內的位置
頁面滾動事件: document.body.onscroll
獲得頁面滾動過的高度:
1、document.body.scrollTop
2、document.documentElement.scrollTop
強調: onscroll中的this指向window!
鍵盤事件：
方法
keydown 按下時
keypress 按下
keyup 擡起時
屬性
keyCode 鍵盤碼，只有數字和字母對應ASCII碼
charCode 對應ASCII碼，只有在keypress中才生效（IE9+）
<body>
<input type="text">
<input type="text">
<input id="t1" type="text">
<input type="text">
<input type="text">
<input type="text">
<inputtype="text">
<input type="text">
<input type="text">
<input type="text">
<script>
var inputs = document.body.getElementsByTagName("input");
for(var i = 0, length = inputs.length; i < length ; i++) {
var input = inputs[i];
//回車鍵的keyCode是13
if(input.type === "text") {
//按下回車，讓下一個文本框獲得焦點
input.onkeydown = function (e) {
if(e.keyCode === 13) {
//focus() 他觸發了onfocus事件
this.nextElementSibling.focus();
}
}
}
}
</script>
</body>
