JS事件
事件是可以被JavaScript偵測到的行為，通俗的講就是當使用者與Web頁面進行某些互動時，解釋器就會建立響應的event對象以描述的資訊
常見的事件
- 使用者點選的頁面上的某項内容
- 滑鼠經過特定的元素
- 使用者按下鍵盤上的某個按鍵
- 使用者滾動或改變視窗大小
- 頁面元素加載完成或加載失敗
事件句柄
事件句柄（又稱事件處理函數、事件監聽函數），指用于響應某個事件而調用的函數。每一個事件對應一個句柄，在程式執行時，将相應的函數或語句指定給事件句柄，則在該事件發生時，浏覽器便執行指定的函數或語句。
元素.addEventListener(‘事件’,函數)；
事件定義
DOM事件流
添加事件addEventListener（）
移除事件removeEventListener（）
IE事件流
IE8及以下
添加事件attachEven（）
移除事件detachEvent（）
IE事件流浏覽器相容
<body>
<button id="mybtn">點選我</button>
<script type="text/javascript">
//相容所有浏覽器
//addEventListener attachEvent
var EventUtil = {
addHandler:function(element,type,handler);{
//綁定事件
//chrom、firefox、IE9等 addEventListener
//IE8及IE8以下的浏覽器 attachEvent
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element,attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
},
removeHandler:function(element,type,handler){
//綁定事件
//chrom、firefox、IE9等 removeEventListener
//IE8及IE8以下的浏覽器 detachEvent
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element,detachEvent){
element.datachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
}
}
</script>
</body>
事件周期
<body>
<div id="parent">
<div id="child" class="child">兒子事件</div>
</div>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
//事件冒泡
// document.getElementById("parent").addEventListener("click",function(e){
// alert("parent事件觸發"+this.id);
// })
// document.getElementById("child").addEventListener("click",function(e){
// alert("child事件觸發"+this.id);
// })
//
//父 添加了事件
// 子 添加了事件
//
// 直系親屬樹結構
// html
// body
// parent 添加了事件
// child 添加了事件
//
//事件冒泡：直系親屬樹結構中，點選某個元素，由于冒泡作用，親屬樹上的元素凡是添加事件的，都會被觸發
//
//事件捕獲
//直系親屬結構
// html
// body
// parent 添加了事件
// child 添加了事件
//
// document.getElementById("parent").addEventListener("click",function(e){
// alert("parent事件觸發"+this.id);
// },true)
// document.getElementById("child").addEventListener("click",function(e){
// alert("child事件觸發"+this.id);
// },true)
//事件委托 （原理就是事件冒泡）
//保證隻添加一次事件
var ul = document.getElementById("ul");
ul.addEventListener("click",function(event){
if(event.target.id == "one"){
alert(1);
}else if(event.target.id == "two"){
alert(2);
}else{
alert(3);
}
},false);
</script>
</body>
event對象
IE9及以上，firefox，chorm浏覽器的event對象
點選兒子，事件在父親上面
event.target 點選誰誰就是targrt，事件源
event.currentTarget 事件綁定在誰身上，就是指向誰
event.preventDefault（） 阻止預設行為
event.stopPropagation（） 取消事件捕獲或者冒泡
event. clientY 、event. pageY 、event. screenY（用戶端，頁面，螢幕）
clientY 指浏覽器頂部底邊到滑鼠的位置 （不包括滾動軸）
pageY 指浏覽器頁面頂部底邊到滑鼠的位置 （包括滾動軸）
screenY 指電腦螢幕頂部到滑鼠位置 （與浏覽器縮放無關）
IE8及以下的浏覽器
event.type 事件類型
event.returnValue = false; 阻止預設行為同preventDefault
event.cancelBubble = true 取消事件冒泡同stopPropagation
srcElement 同target
event對象浏覽器相容
常見事件類型
相容
<script type="text/javascript">
var EventUtil = {
addHandler:function(element,type,handler);{
//綁定事件
//chrom、firefox、IE9等 addEventListener
//IE8及IE8以下的浏覽器 attachEvent
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element,attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
},
removeHandler:function(element,type,handler){
//綁定事件
//chrom、firefox、IE9等 removeEventListener
//IE8及IE8以下的浏覽器 detachEvent
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element,detachEvent){
element.datachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
},
getTarget:function(event){
return event.target || event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation:function(event){
if (event.stopPropagation) {
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
};
常用事件
//UI事件
//1、load事件 當頁面完全加載後在window上面觸發
// EventUtil.addHandler(window, "load", function(e){
// alert("Loaded!");
// });
//img标簽加載完畢
// var image = document.createElement("img");
// EventUtil.addHandler(image, "load", function(e){
// alert("圖檔加載完畢");
// });
// image.src = "1.png";
//圖檔預加載
// var image = new Image();
// EventUtil.addHandler(image, "load", function(e){
// alert("Image loaded!");
// });
// image.src = "smile.gif";
//js動态加載完畢
// var script = document.createElement("script");
// EventUtil.addHandler(script, "load", function(event){
// alert("js Loaded");
// });
// script.src = "jquery.js";
// document.body.appendChild(script);
//相當于 <script src="jquery.js"><//script>
//css動态加載完畢
// var link = document.createElement("link");
// link.type = "text/css";
// link.rel = "stylesheet";
// EventUtil.addHandler(link, "load", function(event){
// alert("css loaded");
// });
// link.href = "example.css";
// document.getElemnetsByTagName("head")[0].appendChild(link);
//2、unload事件 使用者從一個頁面切換的另一個頁面
//3、resize事件 視窗大小發生變化時觸發
//4、scroll事件 主要針對新舊浏覽器
//焦點事件
//1、 blur 元素失去焦點時觸發
//2、 focus 不支援冒泡，元素擷取焦點時觸發
//3、 focusin 支援冒泡，元素擷取焦點時觸發，支援事件浏覽器是IE5.5+，Safari5.1+，chrome等
//4、 focusout 同blur，元素失去焦點時觸發，支援事件浏覽器是IE5.5+，Safari5.1+，chrome等
//5、 DOMFocusIn 同focus，元素擷取焦點時觸發
//6、 DOMFocusOut 同blur，元素失去焦點時觸發
//滑鼠事件
//1、 click 單擊事件
//2、dbclick 輕按兩下事件
//3、mousedown 滑鼠按下時觸發的事件
//4、mouseup 滑鼠松開時觸發的事件
//mousedown + mouseup = click
//mousenove 滑鼠在元素内移動是執行
//mouseout 滑鼠離開元素或其子元素的時候執行
//mouseover 滑鼠進入元素或其子元素的時候執行
//mouseenter //隻能進入目标元素才觸發
//mouseleave //隻能離開目标元素才觸發
焦點事件
1、 blur 元素失去焦點時觸發
2、 focus 不支援冒泡，元素擷取焦點時觸發
3、 focusin 支援冒泡，元素擷取焦點時觸發，支援事件浏覽器是IE5.5+，Safari5.1+，chrome等
4、 focusout 同blur，元素失去焦點時觸發，支援事件浏覽器是IE5.5+，Safari5.1+，chrome等
5、 DOMFocusIn 同focus，元素擷取焦點時觸發
6、 DOMFocusOut 同blur，元素失去焦點時觸發
滑鼠事件
1、 click 單擊事件
2、dbclick 輕按兩下事件
3、mousedown 滑鼠按下時觸發的事件
4、mouseup 滑鼠松開時觸發的事件
mousedown + mouseup = click
mousenove 滑鼠在元素内移動是執行
mouseout 滑鼠離開元素或其子元素的時候執行
mouseover 滑鼠進入元素或其子元素的時候執行
mouseenter //隻能進入目标元素才觸發
mouseleave //隻能離開目标元素才觸發
keydown事件：按鍵被按下時觸發，支援keyCode
任意按鍵皆可觸發
keyup事件：按鍵被擡起時觸發，支援keyCode
keypress事件：按鍵被按下時觸發，支援charCode（字元碼），keyCode（鍵碼）不穩定
字元觸發
textInput事件
DOMNodeInserted事件：添加被觸發
DOMNodeRemoved事件：删除被觸發
DOMNodeInsertedIntoDocument事件：添加之前被被觸動
DOMNodeRemovedFromDocument事件：删除之前被觸發
DOMSubtreeModified事件：任何變化都會被觸發
DOMContentLoaded事件：在DOM樹之後就觸發，不理會圖像、JavaScript檔案、css檔案或其他資源是否已經下載下傳
DOMContentLoaded事件的速度一定快于laod事件
readystatechange事件：情緒化，限制IE，很難預料
hashchange事件
移動端事件類型
touchstart：手指觸摸螢幕
touchmove：手指在螢幕上滑動
touchend：手指從螢幕上移開
**touchcancel：**當系統停止跟蹤觸摸時觸發
多手指操作螢幕時