淺談JavaScript的事件
更新時間：2015年02月27日 11:07:29 投稿：hebedich
事件是可以被 JavaScript 偵測到的行為。網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)的事件。比方說，我們可以在用戶點擊某按鈕時產(chǎn)生一個 onClick 事件來觸發(fā)某個函數(shù)。事件在 HTML 頁面中定義。
1、事件流
事件流描述的是從頁面中接收事件的順序。但是IE提出的是冒泡流，而Netscape Communicator提出的是捕獲流。
JavaScript事件流
2、事件冒泡（event bubbling）
事件開始由最具體的元素（嵌套層次最深的那個節(jié)點）接收，然后逐級向上傳播為較不為具體的節(jié)點（文檔）。如下：
復制代碼 代碼如下:
<html>
<head>
<title>事件冒泡</title>
</head>
<body>
<div id="myDiv">點擊我</div>
</body>
</html>
window.onload = function(){
var obj = document.getElementById("test");
obj.onclick = function(){
alert(this.tagName);
};
document.body.onclick = function(){
alert(this.tagName);
};
document.documentElement.onclick = function(){
alert(this.tagName);
};
document.onclick = function(){
alert("document");
};
window.onclick = function(){
alert("window");
}
};
事件傳播順序：div——>body——>html——>document
注意：
現(xiàn)代所有瀏覽器都支持冒泡事件，但實現(xiàn)還有一些差別。IE5.5及更早版本中的事件冒泡會直接從body跳到document（不執(zhí)行html）。Firefox、Chrome和Safari則將事件一直冒泡到window對象。
3、停止事件冒泡和取消默認事件
a. 獲取事件對象
復制代碼 代碼如下:
function getEvent(event) {
// window.event IE
// event 非IE
return event || window.event;
}
b 功能:停止事件冒泡
復制代碼 代碼如下:
function stopBubble(e) {
// 如果提供了事件對象，則這是一個非IE瀏覽器
if ( e && e.stopPropagation ) {
// 因此它支持W3C的stopPropagation()方法
e.stopPropagation();
} else {
// 否則，我們需要使用IE的方式來取消事件冒泡
window.event.cancelBubble = true;
}
}
c. 阻止瀏覽器的默認行為
復制代碼 代碼如下:
function stopDefault( e ) {
// 阻止默認瀏覽器動作(W3C)
if ( e && e.preventDefault ) {
e.preventDefault();
} else {
// IE中阻止函數(shù)器默認動作的方式
window.event.returnValue = false;
}
return false;
}
您可能感興趣的文章:
- javascript 鼠標事件總結(jié)
- javascript 鍵盤事件總結(jié) 推薦
- JavaScript 模擬用戶單擊事件
- Javascript 模擬點擊事件(點擊鏈接與html點擊) 兼容IE/Firefox
- javascript開發(fā)中使用onpropertychange,oninput事件解決onchange事件的不足
- JavaScript與Image加載事件(onload)、加載狀態(tài)(complete)
- javascript 動態(tài)改變onclick事件觸發(fā)函數(shù)代碼
- JavaScript window.document的屬性、方法和事件小結(jié)
- JavaScript獲取onclick、onchange等事件值的代碼
- IE8的JavaScript點擊事件(onclick)不兼容的解決方法
- javascript移動設備Web開發(fā)中對touch事件的封裝實例
- javascript監(jiān)聽鼠標滾輪事件淺析
- 21個JavaScript事件(Events)屬性匯總
- javascript使用for循環(huán)批量注冊的事件不能正確獲取索引值的解決方法
- 純JavaScript實現(xiàn)獲取onclick、onchange等事件的值
- JavaScript事件委托用法分析
- 淺談javascript中this在事件中的應用
相關(guān)文章
BigInt是ES2020中引入的新的原始數(shù)據(jù)類型。它允許程序員使用更大的整數(shù)值，以匹配需要處理的數(shù)據(jù)集。在這篇博客中，我們將探討B(tài)igInt的用法和它與其他相似方法的區(qū)別，感興趣的可以了解一下2023-04-04
JavaScript獲取數(shù)據(jù)類型的方法詳解
這篇文章給大家介紹了JavaScript獲取數(shù)據(jù)類型的方法,文中所介紹的所有知識點、代碼示例以及提供的解決方案,均不考慮?IE?瀏覽器,僅支持最新版本的?Chrome、Firefox、Edge?和?Safari?瀏覽器,需要的朋友可以參考下2024-02-02
本篇文章主要介紹了RequireJS按需加載樣式文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要為大家詳細介紹了three.js實現(xiàn)炫酷的全景3D重力感應，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
基于jquery的高性能td和input切換并可修改內(nèi)容實現(xiàn)代碼
在實際工作中，我們會碰到這樣一個情況。在頁面中顯示著100個數(shù)據(jù)，同時用戶還希望他可以更改其中的數(shù)據(jù)，普通的方式可能如下2011-01-01
關(guān)于封裝axios網(wǎng)絡請求降低代碼耦合度詳解
在項目中直接使用Axios或其他第三方庫來發(fā)送網(wǎng)絡請求獲取數(shù)據(jù)時,會導致代碼與網(wǎng)絡請求的邏輯耦合度過高,導致難以維護,所以本文將講解如何將網(wǎng)路請求的代碼進行封裝來進行解耦操作,文中通過代碼示例和圖文講解的非常詳細,需要的朋友可以參考下2024-05-05
javascript學習隨筆(編寫瀏覽器腳本 Navigator Scripting )
javascript學習隨筆(編寫瀏覽器腳本 Navigator Scripting )...2007-03-03
JavaScript的new date等日期函數(shù)在safari中遇到的坑
safari中對于JavaScript的new Date函數(shù)的支持有一個比較奇怪的問題，帶著這個奇怪的問題我們通過本文一起學習吧2016-10-10
這篇文章主要介紹了js基于canvas實現(xiàn)時鐘組件的方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
JavaScript中的相等性判斷,在項目開發(fā)中,我經(jīng)常會遇到,今天我們一起探討下,下面這篇文章主要給大家介紹了關(guān)于JavaScript相等判斷的避坑實戰(zhàn)指南,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08