js事件是為了實現(xiàn)用戶交互，比如當用戶鼠標點擊或者鍵盤輸入時，瀏覽器會監(jiān)聽截獲并且通知js做出反饋執(zhí)行相應的函數(shù)，實現(xiàn)交互。
創(chuàng)新互聯(lián)主要從事做網站、成都做網站、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務普陀,10多年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575
js的事件類型有很多，我們先來大概總結一下常用的JS事件
click點擊事件、mousedown鼠標按下事件、mousemove鼠標移動事件、mouseup鼠標抬起事件
contextmenu右鍵出菜單事件、mouseenter/mouseover鼠標進入事件、mouserleave/mouseout鼠標離開事件
可通過事件對象的button屬性來區(qū)分是左鍵\滾輪\右鍵，分別對應值 0 / 1 / 2
DOM3規(guī)定：click事件只能監(jiān)聽左鍵；只能通過mousedown和mouseup來判斷鼠標鍵
keydown某鍵被按下時、keyup被松開時、keypress按下并且松開時
觸發(fā)順序：先 keydown，然后keypress，最后keyup
keydown和keypress的區(qū)別：
input：文本變化時觸發(fā)
change：聚焦或失去焦點時判斷狀態(tài)是否改變，發(fā)生改變是觸發(fā)change事件
focus：聚焦時觸發(fā)
blur：失去焦點時觸發(fā)
利用focus和blur可模擬placeholder
scroll：滾動條滾動時
load：頁面加載完觸發(fā)
abort：圖像的加載失敗
dblclick：雙擊事件
error：當加載圖像和文檔時發(fā)生錯誤
resize：窗口或者框架被重新調整大小
select：文本被選中時
reset：點擊重置按鈕時
submit：點擊提交按鈕時
接著看如何給DOM元素綁定事件處理函數(shù)
兼容性很好
但是根據(jù)js的特點，這種賦值的方式肯定會被后面的值覆蓋。因此這種方式綁定事件處理函數(shù)規(guī)則是：同一個元素同一個事件只能綁定一個處理函數(shù)。等同于第一種寫在行間。
IE8及以下不兼容
通過addEventListener綁定的方式，同個元素的同一個事件可以綁定多個處理函數(shù)，不會被覆蓋。
attachEvent跟addEventListener 基本一致，也是同一個元素的同一個事件可以綁定多個處理函數(shù)，不會被覆蓋。不同的是attachEvent可以綁定的函數(shù)是可以重復的，即即使綁定同一個函數(shù)都不會不覆蓋。
以上幾種事件綁定方式里面的this指向有點區(qū)別：
也比較好理解，IE獨有的特殊一點指向window，其他都指向dom元素本身
封裝一個兼容性的方法，用于綁定事件：
有的時候我們希望解除事件處理函數(shù)，那怎么辦呢？
其實解除事件處理函數(shù)也對應有辦法方法：
1. ele.onxxx = false / ' ' / null
2. ele.removeEventListener(type,fnName,false)
3. ele.attachEvent('on' + type,fnName)
值得注意的是：若干綁定的事件處理函數(shù)是匿名函數(shù)，則無法解除綁定！
不知道有沒有發(fā)現(xiàn)，在上面綁定事件處理函數(shù)的時候，處理函數(shù)有個參數(shù)e或者叫event，其實是一個事件對象
事件對象就是處理函數(shù)里面的一個參數(shù)，說白了就是瀏覽器打包好的一個對象自動傳入到處理函數(shù)的第一個參數(shù)中。
為了兼容IE一般這么寫： e = e || window.event
事件對象會有個屬性target，這個target叫事件源對象，記錄可事件具體在誰身上觸發(fā)的那個源頭
同樣IE上事件源對象是e.srcElement，谷歌兩個都有
所以為了兼容IE一般獲取事件源對象是這么來寫：
當瀏覽器發(fā)展到第四代時(IE4及Netscape4)，瀏覽器開發(fā)團隊遇到了一個很有意思的問題：頁面的哪一部分會擁有某個特定的事件？想象畫在一張紙上的一組同心圓。如果把手指放在圓心上，那么手指指向的不是一個圓，而是紙上的所有圓
兩家公司的瀏覽器開發(fā)團隊在看待瀏覽器事件方面還是一致的。如果單擊了某個按鈕，他們都認為單擊事件不僅僅發(fā)生在按鈕上，甚至也單擊了整個頁面
但有意思的是，IE和Netscape開發(fā)團隊居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流。事件冒泡和事件捕獲稱為兩種事件處理模型
IE的事件流叫做事件冒泡(event bubbling)， 事件冒泡是結構上（非視覺上）嵌套的函數(shù)存在事件冒泡功能，即同一事件自子元素冒泡向父元素（自底向上）
[注意]所有現(xiàn)代瀏覽器都支持事件冒泡
但在具體實現(xiàn)在還是有一些差別。IE9、Firefox、Chrome、Safari將事件一直冒泡到window對象
而事件捕獲的思想是不太具體的節(jié)點應該更早接收到事件，而最具體的節(jié)點應該最后接收到事件。事件捕獲的用意在于在事件到達預定目標之前就捕獲它
即事件捕獲是指： 結構上（非視覺上）嵌套的元素存在事件捕獲功能，即同一事件自父元素冒泡向子元素（自頂向下）
注意IE上沒有事件捕獲，Chrome和新版本的Firefox等都實現(xiàn)了
一個dom元素的一個事件類型綁定的一個處理函數(shù)只能存在一種事件模型，要么事件冒泡要么事件捕獲。正常的通過addEventListener(type,fn,false)綁定事件時，最后一個參數(shù)默認是false表示的是，事件冒泡模型。如果改成true，立即變成事件捕獲模型
如果一個dom元素的一個事件類型綁定了兩個處理函數(shù)，兩個函數(shù)的事件處理模型一個是事件冒泡一個是事件捕獲，觸發(fā)順序是先捕獲，后冒泡。
focus、blur、change、submit、reset、select等事件類型不冒泡
可以 利用事件冒泡和事件源對象可以叫事件委托給父元素
利用事件冒泡和事件源對象進行處理
優(yōu)點：
性能好，不需要循環(huán)所有元素一個個綁定事件
靈活，當有其他新的子元素時，不需要重新綁定事件。
有的時候，我們不希望有冒泡功能，那我們怎么取消事件冒泡呢？
封裝一個都好使的取消冒泡函數(shù)
有的時候我們需要阻止一些瀏覽器默認的事件
比如：表單提交、a鏈接跳轉、右鍵菜單等
有幾種方式：
參考資料：
DOM事件流的三個階段
深入理解DOM事件機制系列第一篇——事件流
JS事件匯總
JS事件模型
事件1（上）
事件1（下）
DOM級別與DOM事件
DOM事件機制解惑
事件模型
JavaScript 事件委托詳解
JavaScript 事件的學與記：stopPropagation 和 stopImmediatePropagation
event.target和event.currentTarget的區(qū)別
js怎么區(qū)分出點擊的是鼠標左鍵還是右鍵？
也可以理解成為了考慮兼容，有時候在用JS動態(tài)設置一個元素的樣式的時候要同時考慮style="display:none"和樣式表里面的elem {display:none}這兩種情況。舉個簡單的例子說明：如果單擊一個按鈕讓一個DIV元素顯示或隱藏（單擊按鈕時如果DIV默認是隱藏的就顯示，反之顯示）。首先要獲取DIV元素默認的顯示狀態(tài)，如果這時只獲取行間樣式而樣式表里設置了DIV元素的display的話獲取的樣式就不那么準確。所以除了行間樣式外樣式表內的非行間樣式也要同時獲取才行。
首先感謝cvwyg ！
我成功試用。
在EmEditor的宏文件jsee中加注，需要單獨建行，以半角“/”開頭，打出注視文字，再以半角“/”結束。例如
/邏輯行尾：/
document.selection.EndOfLine(false,eeLineLogical);
/輸入:號：/
document.selection.Text=":";
/按Del鍵：/
document.selection.Delete(1);
/邏輯行頭：/
document.selection.StartOfLine(false,eeLineLogical);
行間樣式是指通過style.xx獲得的樣式，但對于class引用的 屬性無法獲取，
如果要獲取class引用的屬性，則需要
function?getStyle(obj,attr){????//獲取非行間樣式，obj是對象，attr是值
if(obj.currentStyle){???//針對ie獲取非行間樣式
return?obj.currentStyle[attr];
}else{
return?getComputedStyle(obj,false)[attr];???//針對非ie
};
};
代碼拷貝于
div style='color:red;'/div
上面的 style='color:red; 叫做 “行間樣式”
非行間樣式指的是你的html元素的樣式不是直接寫在元素里的，而是通過樣式表等方式給html元素添加樣式的，就叫做 ‘非行間樣式’
望采納
重慶分公司
重慶分公司
