匯總js事件相關(guān)及事件處理模型

js事件是為了實(shí)現(xiàn)用戶(hù)交互，比如當(dāng)用戶(hù)鼠標(biāo)點(diǎn)擊或者鍵盤(pán)輸入時(shí)，瀏覽器會(huì)監(jiān)聽(tīng)截獲并且通知js做出反饋執(zhí)行相應(yīng)的函數(shù)，實(shí)現(xiàn)交互。

創(chuàng)新互聯(lián)主要從事做網(wǎng)站、成都做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)普陀,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):18980820575

js的事件類(lèi)型有很多，我們先來(lái)大概總結(jié)一下常用的JS事件

click點(diǎn)擊事件、mousedown鼠標(biāo)按下事件、mousemove鼠標(biāo)移動(dòng)事件、mouseup鼠標(biāo)抬起事件

contextmenu右鍵出菜單事件、mouseenter/mouseover鼠標(biāo)進(jìn)入事件、mouserleave/mouseout鼠標(biāo)離開(kāi)事件

可通過(guò)事件對(duì)象的button屬性來(lái)區(qū)分是左鍵\滾輪\右鍵，分別對(duì)應(yīng)值 0 / 1 / 2

DOM3規(guī)定：click事件只能監(jiān)聽(tīng)左鍵；只能通過(guò)mousedown和mouseup來(lái)判斷鼠標(biāo)鍵

keydown某鍵被按下時(shí)、keyup被松開(kāi)時(shí)、keypress按下并且松開(kāi)時(shí)

觸發(fā)順序：先 keydown，然后keypress，最后keyup

keydown和keypress的區(qū)別：

input：文本變化時(shí)觸發(fā)

change：聚焦或失去焦點(diǎn)時(shí)判斷狀態(tài)是否改變，發(fā)生改變是觸發(fā)change事件

focus：聚焦時(shí)觸發(fā)

blur：失去焦點(diǎn)時(shí)觸發(fā)

利用focus和blur可模擬placeholder

scroll：滾動(dòng)條滾動(dòng)時(shí)

load：頁(yè)面加載完觸發(fā)

abort：圖像的加載失敗

dblclick：雙擊事件

error：當(dāng)加載圖像和文檔時(shí)發(fā)生錯(cuò)誤

resize：窗口或者框架被重新調(diào)整大小

select：文本被選中時(shí)

reset：點(diǎn)擊重置按鈕時(shí)

submit：點(diǎn)擊提交按鈕時(shí)

接著看如何給DOM元素綁定事件處理函數(shù)

兼容性很好

但是根據(jù)js的特點(diǎn)，這種賦值的方式肯定會(huì)被后面的值覆蓋。因此這種方式綁定事件處理函數(shù)規(guī)則是：同一個(gè)元素同一個(gè)事件只能綁定一個(gè)處理函數(shù)。等同于第一種寫(xiě)在行間。

IE8及以下不兼容

通過(guò)addEventListener綁定的方式，同個(gè)元素的同一個(gè)事件可以綁定多個(gè)處理函數(shù)，不會(huì)被覆蓋。

attachEvent跟addEventListener 基本一致，也是同一個(gè)元素的同一個(gè)事件可以綁定多個(gè)處理函數(shù)，不會(huì)被覆蓋。不同的是attachEvent可以綁定的函數(shù)是可以重復(fù)的，即即使綁定同一個(gè)函數(shù)都不會(huì)不覆蓋。

以上幾種事件綁定方式里面的this指向有點(diǎn)區(qū)別：

也比較好理解，IE獨(dú)有的特殊一點(diǎn)指向window，其他都指向dom元素本身

封裝一個(gè)兼容性的方法，用于綁定事件：

有的時(shí)候我們希望解除事件處理函數(shù)，那怎么辦呢？

其實(shí)解除事件處理函數(shù)也對(duì)應(yīng)有辦法方法：

1. ele.onxxx = false / ' ' / null

2. ele.removeEventListener(type,fnName,false)

3. ele.attachEvent('on' + type,fnName)

值得注意的是：若干綁定的事件處理函數(shù)是匿名函數(shù)，則無(wú)法解除綁定！

不知道有沒(méi)有發(fā)現(xiàn)，在上面綁定事件處理函數(shù)的時(shí)候，處理函數(shù)有個(gè)參數(shù)e或者叫event，其實(shí)是一個(gè)事件對(duì)象

事件對(duì)象就是處理函數(shù)里面的一個(gè)參數(shù)，說(shuō)白了就是瀏覽器打包好的一個(gè)對(duì)象自動(dòng)傳入到處理函數(shù)的第一個(gè)參數(shù)中。

為了兼容IE一般這么寫(xiě)： e = e || window.event

事件對(duì)象會(huì)有個(gè)屬性target，這個(gè)target叫事件源對(duì)象，記錄可事件具體在誰(shuí)身上觸發(fā)的那個(gè)源頭

同樣IE上事件源對(duì)象是e.srcElement，谷歌兩個(gè)都有

所以為了兼容IE一般獲取事件源對(duì)象是這么來(lái)寫(xiě)：

當(dāng)瀏覽器發(fā)展到第四代時(shí)(IE4及Netscape4)，瀏覽器開(kāi)發(fā)團(tuán)隊(duì)遇到了一個(gè)很有意思的問(wèn)題：頁(yè)面的哪一部分會(huì)擁有某個(gè)特定的事件？想象畫(huà)在一張紙上的一組同心圓。如果把手指放在圓心上，那么手指指向的不是一個(gè)圓，而是紙上的所有圓

兩家公司的瀏覽器開(kāi)發(fā)團(tuán)隊(duì)在看待瀏覽器事件方面還是一致的。如果單擊了某個(gè)按鈕，他們都認(rèn)為單擊事件不僅僅發(fā)生在按鈕上，甚至也單擊了整個(gè)頁(yè)面

但有意思的是，IE和Netscape開(kāi)發(fā)團(tuán)隊(duì)居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流。事件冒泡和事件捕獲稱(chēng)為兩種事件處理模型

IE的事件流叫做事件冒泡(event bubbling)， 事件冒泡是結(jié)構(gòu)上（非視覺(jué)上）嵌套的函數(shù)存在事件冒泡功能，即同一事件自子元素冒泡向父元素（自底向上）

[注意]所有現(xiàn)代瀏覽器都支持事件冒泡

但在具體實(shí)現(xiàn)在還是有一些差別。IE9、Firefox、Chrome、Safari將事件一直冒泡到window對(duì)象

而事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件，而最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件。事件捕獲的用意在于在事件到達(dá)預(yù)定目標(biāo)之前就捕獲它

即事件捕獲是指： 結(jié)構(gòu)上（非視覺(jué)上）嵌套的元素存在事件捕獲功能，即同一事件自父元素冒泡向子元素（自頂向下）

注意IE上沒(méi)有事件捕獲，Chrome和新版本的Firefox等都實(shí)現(xiàn)了

一個(gè)dom元素的一個(gè)事件類(lèi)型綁定的一個(gè)處理函數(shù)只能存在一種事件模型，要么事件冒泡要么事件捕獲。正常的通過(guò)addEventListener(type,fn,false)綁定事件時(shí)，最后一個(gè)參數(shù)默認(rèn)是false表示的是，事件冒泡模型。如果改成true，立即變成事件捕獲模型

如果一個(gè)dom元素的一個(gè)事件類(lèi)型綁定了兩個(gè)處理函數(shù)，兩個(gè)函數(shù)的事件處理模型一個(gè)是事件冒泡一個(gè)是事件捕獲，觸發(fā)順序是先捕獲，后冒泡。

focus、blur、change、submit、reset、select等事件類(lèi)型不冒泡

可以 利用事件冒泡和事件源對(duì)象可以叫事件委托給父元素

利用事件冒泡和事件源對(duì)象進(jìn)行處理

優(yōu)點(diǎn)：

性能好，不需要循環(huán)所有元素一個(gè)個(gè)綁定事件

靈活，當(dāng)有其他新的子元素時(shí)，不需要重新綁定事件。

有的時(shí)候，我們不希望有冒泡功能，那我們?cè)趺慈∠录芭菽兀?/p>

封裝一個(gè)都好使的取消冒泡函數(shù)

有的時(shí)候我們需要阻止一些瀏覽器默認(rèn)的事件

比如：表單提交、a鏈接跳轉(zhuǎn)、右鍵菜單等

有幾種方式：

參考資料：

DOM事件流的三個(gè)階段

深入理解DOM事件機(jī)制系列第一篇——事件流

JS事件匯總

JS事件模型

事件1（上）

事件1（下）

DOM級(jí)別與DOM事件

DOM事件機(jī)制解惑

事件模型

JavaScript 事件委托詳解

JavaScript 事件的學(xué)與記：stopPropagation 和 stopImmediatePropagation

event.target和event.currentTarget的區(qū)別

js怎么區(qū)分出點(diǎn)擊的是鼠標(biāo)左鍵還是右鍵？

JavaScript里面為什么需要獲取非行間樣式？獲取了有什么用？

也可以理解成為了考慮兼容，有時(shí)候在用JS動(dòng)態(tài)設(shè)置一個(gè)元素的樣式的時(shí)候要同時(shí)考慮style="display:none"和樣式表里面的elem {display:none}這兩種情況。舉個(gè)簡(jiǎn)單的例子說(shuō)明：如果單擊一個(gè)按鈕讓一個(gè)DIV元素顯示或隱藏（單擊按鈕時(shí)如果DIV默認(rèn)是隱藏的就顯示，反之顯示）。首先要獲取DIV元素默認(rèn)的顯示狀態(tài)，如果這時(shí)只獲取行間樣式而樣式表里設(shè)置了DIV元素的display的話(huà)獲取的樣式就不那么準(zhǔn)確。所以除了行間樣式外樣式表內(nèi)的非行間樣式也要同時(shí)獲取才行。

jsee是EmEditor的宏文件，如何在其行間或行后加注釋?zhuān)?/h2>

首先感謝cvwyg ！

我成功試用。

在EmEditor的宏文件jsee中加注，需要單獨(dú)建行，以半角“/”開(kāi)頭，打出注視文字，再以半角“/”結(jié)束。例如

/邏輯行尾：/

document.selection.EndOfLine(false,eeLineLogical);

/輸入:號(hào)：/

document.selection.Text=":";

/按Del鍵：/

document.selection.Delete(1);

/邏輯行頭：/

document.selection.StartOfLine(false,eeLineLogical);

JavaScript的獲取非行間樣式是什么意思？

行間樣式是指通過(guò)style.xx獲得的樣式，但對(duì)于class引用的 屬性無(wú)法獲取，

如果要獲取class引用的屬性，則需要

function?getStyle(obj,attr){????//獲取非行間樣式，obj是對(duì)象，attr是值

if(obj.currentStyle){???//針對(duì)ie獲取非行間樣式

return?obj.currentStyle[attr];

}else{

return?getComputedStyle(obj,false)[attr];???//針對(duì)非ie

};

};

代碼拷貝于

JavaScript里面的獲取非行間樣式是什么意思？有什么用？

div style='color:red;'/div

上面的 style='color:red; 叫做 “行間樣式”

非行間樣式指的是你的html元素的樣式不是直接寫(xiě)在元素里的，而是通過(guò)樣式表等方式給html元素添加樣式的，就叫做 ‘非行間樣式’

望采納

網(wǎng)站名稱(chēng)：javascript行間,js 行間距
文章轉(zhuǎn)載：http://chinadenli.net/article7/dsgcioj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、品牌網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷(xiāo)、網(wǎng)站制作、Google、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)