js事件(Event)知識整理
更新時間：2012年10月11日 16:52:01 作者：
事件（Event）知識整理,本文由網(wǎng)上資料整理而來,需要的朋友可以參考下
鼠標(biāo)事件
鼠標(biāo)移動到目標(biāo)元素上的那一刻，首先觸發(fā)mouseover
之后如果光標(biāo)繼續(xù)在元素上移動，則不斷觸發(fā)mousemove
如果按下鼠標(biāo)上的設(shè)備(左鍵,右鍵,滾輪……)，則觸發(fā)mousedown
當(dāng)設(shè)備彈起的時候觸發(fā)mouseup
目標(biāo)元素的滾動條發(fā)生移動時(滾動滾輪/拖動滾動條。。)觸發(fā)scroll
滾動滾輪觸發(fā)mousewheel，這個要區(qū)別于scroll
鼠標(biāo)移出元素的那一刻，觸發(fā)mouseout
事件注冊
平常我們綁定事件的時候用dom.onxxxx=function(){}的形式
這種方式是給元素的onxxxx屬性賦值，只能綁定有一個處理句柄。
但很多時候我們需要綁定多個處理句柄到一個事件上，而且還可能要動態(tài)的增刪某個處理句柄
下面的事件注冊方式就能解決這個需求。
先介紹一下四個方法
//IE以外
target.addEventListener(type,listener,useCapture)
target.removeEventListener(type,listener,useCapture);
target ：文檔節(jié)點、document、window 或 XMLHttpRequest。
type ：字符串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：實現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。
useCapture ：是否使用捕捉，一般用 false。
//IE
target.attachEvent(type, listener);
target.detachEvent(type, listener);
target ：文檔節(jié)點、document、window 或 XMLHttpRequest。
type ：字符串，事件名稱，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：實現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。
兩者使用的原理：可對執(zhí)行的優(yōu)先級不一樣，實例講解如下：
ele.attachEvent("onclick",method1);
ele.attachEvent("onclick",method2);
ele.attachEvent("onclick",method3);
執(zhí)行順序為method3->method2->method1
ele.addEventListener("click",method1,false);
ele.addEventListener("click",method2,false);
ele.addEventListener("click",method3,false);
執(zhí)行順序為method1->method2->method3
兼容后的方法
var func = function(){};
//例：addEvent(window,"load",func)
function addEvent(elem, type, fn) {
if (elem.attachEvent) {
elem.attachEvent('on' + type, fn);
return;
}
if (elem.addEventListener) {
elem.addEventListener(type, fn, false);
}
}
//例：removeEvent(window,"load",func)
function removeEvent(elem, type, fn) {
if (elem.detachEvent) {
elem.detachEvent('on' + type, fn);
return;
}
if (elem.removeEventListener) {
elem.removeEventListener(type, fn, false);
}
}
獲取事件對象和事件源(觸發(fā)事件的元素)
function eventHandler(e){
//獲取事件對象
e = e || window.event;//IE和Chrome下是window.event FF下是e
//獲取事件源
var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target
}
取消事件默認(rèn)行為(例如點擊一個<a>后不跳轉(zhuǎn)頁面而是執(zhí)行一個函數(shù))
function eventHandler(e) {
e = e || window.event;
// 防止默認(rèn)行為
if (e.preventDefault) {
e.preventDefault();//IE以外
} else {
e.returnValue = false;//IE
//注意：這個地方是無法用return false代替的
//return false只能取消元素
}
}
阻止事件冒泡
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();//IE以外
} else {
e.cancelBubble = true;//IE
}
}
事件委托
例如，你有一個很多行的大表格，在每個<tr>上綁定點擊事件是個非常危險的想法，因為性能是個大問題。流行的做法是使用事件委托。
事件委托描述的是將事件綁定在容器元素上，然后通過判斷點擊的target子元素的類型來觸發(fā)相應(yīng)的事件。
事件委托依賴于事件冒泡，如果事件冒泡到table之前被禁用的話，那以下代碼就無法工作了。
myTable.onclick = function () {
e = e || window.event;
var targetNode = e.target || e.srcElement;
// 測試如果點擊的是TR就觸發(fā)
if (targetNode.nodeName.toLowerCase() === 'tr') {
alert('You clicked a table row!');
}
}
事件（Event）知識整理(二)
事件流
DOM同時支持兩種事件模型：捕獲型事件和冒泡型事件
并且每當(dāng)某一事件發(fā)生時，都會經(jīng)過捕獲階段->處理階段->冒泡階段(有些瀏覽器不支持捕獲)
捕獲階段是由上層元素到下層元素的順序依次。而冒泡階段則正相反。
如下圖
當(dāng)事件觸發(fā)時body會先得到有事件發(fā)生的信息，然后依次往下傳遞，直到到達(dá)最詳細(xì)的元素。這就是事件捕獲階段。
還記得事件注冊方法ele.addEventListener(type,handler,flag)吧，F(xiàn)lag是一個Boolean值，true表示事件捕捉階段執(zhí)行，false表示事件冒泡階段執(zhí)行。
接著就是事件冒泡階段。從下往上 依次執(zhí)行事件處理函數(shù)(當(dāng)然前提是當(dāng)前元素為該事件注冊了事件句柄)。
在這個過程中，可以阻止事件的冒泡，即停止向上的傳遞。
阻止冒泡有時是很有必要的，例如
<div onclick=funcA()>
<button onclick=funcB()>Click</button>
</div>
本意是如果點擊div中按鈕以外的位置時執(zhí)行funcA,點擊button時執(zhí)行funcB。但是實際點擊button時就會先后執(zhí)行funcB,funcA。
而如果在button的事件句柄中阻止冒泡的話，div就不會執(zhí)行事件句柄了。
鼠標(biāo)移動到目標(biāo)元素上的那一刻，首先觸發(fā)mouseover
之后如果光標(biāo)繼續(xù)在元素上移動，則不斷觸發(fā)mousemove
如果按下鼠標(biāo)上的設(shè)備(左鍵,右鍵,滾輪……)，則觸發(fā)mousedown
當(dāng)設(shè)備彈起的時候觸發(fā)mouseup
目標(biāo)元素的滾動條發(fā)生移動時(滾動滾輪/拖動滾動條。。)觸發(fā)scroll
滾動滾輪觸發(fā)mousewheel，這個要區(qū)別于scroll
鼠標(biāo)移出元素的那一刻，觸發(fā)mouseout
事件注冊
平常我們綁定事件的時候用dom.onxxxx=function(){}的形式
這種方式是給元素的onxxxx屬性賦值，只能綁定有一個處理句柄。
但很多時候我們需要綁定多個處理句柄到一個事件上，而且還可能要動態(tài)的增刪某個處理句柄
下面的事件注冊方式就能解決這個需求。
先介紹一下四個方法
復(fù)制代碼 代碼如下:
//IE以外
target.addEventListener(type,listener,useCapture)
target.removeEventListener(type,listener,useCapture);
target ：文檔節(jié)點、document、window 或 XMLHttpRequest。
type ：字符串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：實現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。
useCapture ：是否使用捕捉，一般用 false。
//IE
target.attachEvent(type, listener);
target.detachEvent(type, listener);
target ：文檔節(jié)點、document、window 或 XMLHttpRequest。
type ：字符串，事件名稱，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：實現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。
兩者使用的原理：可對執(zhí)行的優(yōu)先級不一樣，實例講解如下：
ele.attachEvent("onclick",method1);
ele.attachEvent("onclick",method2);
ele.attachEvent("onclick",method3);
執(zhí)行順序為method3->method2->method1
ele.addEventListener("click",method1,false);
ele.addEventListener("click",method2,false);
ele.addEventListener("click",method3,false);
執(zhí)行順序為method1->method2->method3
兼容后的方法
var func = function(){};
//例：addEvent(window,"load",func)
function addEvent(elem, type, fn) {
if (elem.attachEvent) {
elem.attachEvent('on' + type, fn);
return;
}
if (elem.addEventListener) {
elem.addEventListener(type, fn, false);
}
}
//例：removeEvent(window,"load",func)
function removeEvent(elem, type, fn) {
if (elem.detachEvent) {
elem.detachEvent('on' + type, fn);
return;
}
if (elem.removeEventListener) {
elem.removeEventListener(type, fn, false);
}
}
獲取事件對象和事件源(觸發(fā)事件的元素)
復(fù)制代碼 代碼如下:
function eventHandler(e){
//獲取事件對象
e = e || window.event;//IE和Chrome下是window.event FF下是e
//獲取事件源
var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target
}
取消事件默認(rèn)行為(例如點擊一個<a>后不跳轉(zhuǎn)頁面而是執(zhí)行一個函數(shù))
復(fù)制代碼 代碼如下:
function eventHandler(e) {
e = e || window.event;
// 防止默認(rèn)行為
if (e.preventDefault) {
e.preventDefault();//IE以外
} else {
e.returnValue = false;//IE
//注意：這個地方是無法用return false代替的
//return false只能取消元素
}
}
阻止事件冒泡
復(fù)制代碼 代碼如下:
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();//IE以外
} else {
e.cancelBubble = true;//IE
}
}
事件委托
例如，你有一個很多行的大表格，在每個<tr>上綁定點擊事件是個非常危險的想法，因為性能是個大問題。流行的做法是使用事件委托。
事件委托描述的是將事件綁定在容器元素上，然后通過判斷點擊的target子元素的類型來觸發(fā)相應(yīng)的事件。
事件委托依賴于事件冒泡，如果事件冒泡到table之前被禁用的話，那以下代碼就無法工作了。
復(fù)制代碼 代碼如下:
myTable.onclick = function () {
e = e || window.event;
var targetNode = e.target || e.srcElement;
// 測試如果點擊的是TR就觸發(fā)
if (targetNode.nodeName.toLowerCase() === 'tr') {
alert('You clicked a table row!');
}
}
事件（Event）知識整理(二)
事件流
DOM同時支持兩種事件模型：捕獲型事件和冒泡型事件
并且每當(dāng)某一事件發(fā)生時，都會經(jīng)過捕獲階段->處理階段->冒泡階段(有些瀏覽器不支持捕獲)
捕獲階段是由上層元素到下層元素的順序依次。而冒泡階段則正相反。
如下圖
當(dāng)事件觸發(fā)時body會先得到有事件發(fā)生的信息，然后依次往下傳遞，直到到達(dá)最詳細(xì)的元素。這就是事件捕獲階段。
還記得事件注冊方法ele.addEventListener(type,handler,flag)吧，F(xiàn)lag是一個Boolean值，true表示事件捕捉階段執(zhí)行，false表示事件冒泡階段執(zhí)行。
接著就是事件冒泡階段。從下往上 依次執(zhí)行事件處理函數(shù)(當(dāng)然前提是當(dāng)前元素為該事件注冊了事件句柄)。
在這個過程中，可以阻止事件的冒泡，即停止向上的傳遞。
阻止冒泡有時是很有必要的，例如
復(fù)制代碼 代碼如下:
<div onclick=funcA()>
<button onclick=funcB()>Click</button>
</div>
本意是如果點擊div中按鈕以外的位置時執(zhí)行funcA,點擊button時執(zhí)行funcB。但是實際點擊button時就會先后執(zhí)行funcB,funcA。
而如果在button的事件句柄中阻止冒泡的話，div就不會執(zhí)行事件句柄了。
相關(guān)文章
在本篇文章里小編給大家分享了關(guān)于JavaScript禁用右鍵單擊優(yōu)缺點分析，有需要的朋友們學(xué)習(xí)下。2019-01-01
用于節(jié)點操作的API，顛覆原生操作HTML DOM節(jié)點的API
敏捷開發(fā)是一種以人為核心、迭代、循序漸進(jìn)的開發(fā)方法。在敏捷開發(fā)中，軟件項目的構(gòu)建被切分成多個子項目，各個子項目的成果都經(jīng)過測試，具備集成和可運行的特征。2010-12-12
這篇文章主要介紹了webpack打包js文件的方法及webpack打包后的JS文件如何部署,需要的朋友可以參考下2017-12-12
CascadeView級聯(lián)組件實現(xiàn)思路詳解(分離思想和單鏈表)
本文介紹自己最近做省市級聯(lián)的類似的級聯(lián)功能的實現(xiàn)思路，為了盡可能地做到職責(zé)分離跟表現(xiàn)與行為分離，這個功能拆分成了2個組件并用到了單鏈表來實現(xiàn)關(guān)鍵的級聯(lián)邏輯，下一段有演示效果的gif圖2016-04-04
排他思想的算法就是排除掉其他的，本文主要介紹了JavaScript?排他思想的實現(xiàn)，以及介紹了兩個示例，感興趣的可以了解一下2021-11-11
本文主要介紹了JavaScript數(shù)據(jù)類型的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
關(guān)于VSCode格式化JS自動添加或去掉分號的問題
這篇文章主要介紹了VSCode格式化JS自動添加或去掉分號的問題，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
在前端開發(fā)中我們常常需要從一個跳到另一個頁面,并且將當(dāng)前頁面的數(shù)據(jù)傳遞過去,下面這篇文章主要給大家總結(jié)介紹了關(guān)于JS中跳轉(zhuǎn)傳參的幾種常用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
Javascript 函數(shù)中的參數(shù)使用分析
關(guān)于JS中的函數(shù)，相信大家已經(jīng)很了解了，其中有些特性呢，感覺還是值得提一提的，下面就說說JS中的函數(shù)吧。2010-03-03
這篇文章主要介紹了JS截取字符串的方法,結(jié)合實例形式較為詳細(xì)的分析了JavaScript截取字符串的常用函數(shù)與具體使用技巧,并附帶說明了JS截取字符串substr和substring方法的區(qū)別,需要的朋友可以參考下2015-11-11