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