JavaScript事件物件總結
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：Adobe Dreamweaver JavaScript
作者：黃富滔
撰寫時間：2020年4月28日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
知識點羅列
1、事件簡介
事件，就是檔案或瀏覽器視窗中發生的一些特定的互動瞬間
- JavaScript 與 HTML 之間的互動是通過事件實作的。
個人理解：就是訪問HTML頁面的用戶引起的一系列操作，用戶執行了某些操作后，接著對應的代碼就被觸發了，從而出現提示框等等。
2、檔案的加載
①無論我們寫JS代碼是內部樣式還是外部樣式，我們都應該是寫在html頁面的下邊。因為瀏覽器加載一個頁面的時候自上到下的，讀取一行就加載一行，所以寫在下邊，是確保頁面完全加載后，再去觸發相關的事件。
②JavaScript加載事件（window.onload）在頁面上只能出現一次，如果出現多次，后面的會把前面的覆寫掉。但是在jQuery加載事件（$(document).ready()）在頁面上可以出現多個頁面加載事件，并且后面的不會把前面的代碼覆寫。
3、事件物件
①事件物件簡介
當事件的回應函式被觸發時，瀏覽器每次都會將一個事件物件作為實參傳遞傳遞進回應函式,在事件物件中封裝了當前事件相關的一切資訊，比如：滑鼠的坐標 鍵盤那個按鍵被按下，滑鼠滾輪滾動的方向
②瀏覽器兼容問題
在IE瀏覽器中，在IE8以下的瀏覽器中是將事件物件作為window的屬性進行保存的
其他瀏覽器和IE8以上的瀏覽器中，回應函式被觸發時，瀏覽器不會傳遞事件物件。
所以需要對事件物件進行一個兼容 event=window.event||event;
4、事件物件的屬性：
滑鼠 / 鍵盤屬性
屬性 描述
altKey 回傳當事件被觸發時，"ALT" 是否被按下。
button 回傳當事件被觸發時，哪個滑鼠按鈕被點擊。
clientX 回傳當事件被觸發時，滑鼠指標的水平坐標。
clientY 回傳當事件被觸發時，滑鼠指標的垂直坐標。
screenX 回傳當某個事件被觸發時，滑鼠指標的水平坐標。
screenY 回傳當某個事件被觸發時，滑鼠指標的垂直坐標。
ctrlKey 回傳當事件被觸發時，"CTRL" 鍵是否被按下。
metaKey 回傳當事件被觸發時，"meta" 鍵是否被按下。
relatedTarget 回傳與事件的目標節點相關的節點。
shiftKey 回傳當事件被觸發時，"SHIFT" 鍵是否被按下。
5、一些比較常用的事件
滑鼠事件
①onclick 單擊事件
②ondblclick 雙擊事件
③onmousedown 當滑鼠按下時運行腳本
④onmouseup 當滑鼠松開時運行腳本
⑤onmousemove 當滑鼠移動時運行腳本
⑥onmouseover 當滑鼠移動到元素上運行腳本
⑦onmousewheel 當滑鼠滾輪滾動時運行腳本
鍵盤事件(一般都會系結給一些可以獲取焦點的物件或則是document)
①onkeydown: 鍵盤被按下事件
②onkeyup: 鍵盤被松開的事件
③keyCode：可以獲取鍵盤的編碼，按下不同的按鍵時，會有不同的編碼
④altKey ：alt如果被按下了則回傳true，否則回傳false
⑤ctrlKey:ctrl如果被按下了則回傳true，否則回傳false
⑥shiftKey:shift如果被按下了則回傳true，否則回傳false
6、事件的委派
①簡介
什么是事件委派？當我們為已有的標簽添加一個點擊事件可以的，但是新創建的標簽中，卻無法回應到該點擊事件。當我們想為新創建的標簽有添加一個點擊事件的時候，則需要為新添加的超鏈接需要重新系結。所以事件委派就是用更少的代碼量去解決這個問題的，只系結一次事件，即可應用到多個元素上，即使元素是后添加的，我們可以嘗試將其系結給元素的共同的祖先元素
②事件委派的用法
- 指將事件統一系結給元素共同的祖先元素，這樣當后代元素上的事件觸發時，會一直冒泡到祖先元素，從而通過祖先元素的回應函式來處理事件。比如我們想為無論是已有的還是新創建的li標簽添加點擊事件，我們只需為li的共同祖先ul標簽系結點擊事件
- 事件委派是利用冒泡，通過委派可以減少事件系結的次數，提高程式的性能
-事件物件的屬性target：回傳觸發此事件的元素(事件的目標節點)，簡單點說就是點那個元素，那個元素就會被觸發
7、事件的系結
使用 物件.事件=函式形式系結事件
它只能同時為同一個元素系結同一事件一次，不能系結多次，如果系結多次，后面的會覆寫掉前面的
例如： btn.onclick=function(){alert(1)}; btn.onclick=function(){alert(2)};最后第二個點擊事件會被觸發
解決辦法：
①IE8以上的瀏覽器和其他瀏覽器
方法： addEventListener(事件,回呼函式,布林值) 【需要傳入三個引數】
引數一： 字串形式的事件，不加on，例如 點擊事件用 "click" 表示
引數二： 回呼函式 function(){這里寫要執行的代碼};
引數三：是否在捕獲階段觸發事件，一般都傳false。（true表示在捕獲階段觸發事件，false反之）。
②IE8級IE8以下的瀏覽器
方法：attachEvent(事件,回呼函式) 【需要傳入兩個引數】
引數一： 字串形式的事件，加on，例如 點擊事件用 "onclick" 表示
引數二： 回呼函式 function(){這里寫要執行的代碼};
注意 ：addEventListener()中的this，是系結事件的物件
attachEvent()中的this，是window
需要統一兩個方法的this
考慮到瀏覽器兼容問題，所以我們用一個函式對其進行封裝，判斷瀏覽器該用addEventListener還是用attachEvent方法
代碼：// 函式中相當于傳入三個形參
var btn=document.getElementById("btn");
function Event(eventobj,event,callback){
if(eventobj.addEventListener){
eventobj.addEventListener(event,callback,false);
}else{
Eventobj.attachEvent("on"+event,callback);
callback.call(eventobj);
}
}
//函式的呼叫 ，呼叫時寫入實參
bind(btn,"click",function(){alert(2);});
說明：Eventobj.attachEvent("on"+事件,回呼函式)中，"on"是以字串的形式寫入的，所以在呼叫函式的時候不需要再以bind(btn,"onclick",function(){alert(2);});進行呼叫，而是bind(btn,"click",function(){alert(2);});
8、JavaScript事件冒泡（Bubble）
- 所謂冒泡指的就是事件的向上傳導，當后代元素上的事件被觸發時，其祖先元素的相同事件也會被觸發
- 在開發中大部分情況冒泡都是有用的，如果不希望冒泡發生可以通過事件物件取消冒泡 event.cancelBubble=true
-只需在后代元素內被觸發之前加入代碼event.cancelBubble=true。如果有多個后代元素，但是我們不希望它們的最大的祖先元素也觸發相同事件的時候，我們要在所有的后代元素上加上那句代碼。
9、事件的捕獲和事件取消捕獲（setCapture()方法和releaseCapture()方法）
-該方法可以說支持IE瀏覽器（只會捕獲一次），在谷歌上面呼叫該方會報錯，在火狐上面雖然不報錯，但是不會觸發該方法
-在IE上，如果呼叫了該方法，無論你點擊了那里，都會進行一次事件的捕獲
語法：事件捕獲 事件物件.setCapture();
取消捕獲 事件物件.releaseCapture();
10、事件的傳播
- W3C綜合了微軟公司和網景公司的方案，將事件傳播分成了三個階段
①.捕獲階段
- 在捕獲階段時從最外層的祖先元素，向目標元素進行事件的捕獲，但是默認此時不會觸發事件
②.目標階段
- 事件捕獲到目標元素，捕獲結束開始在目標元素上觸發事件
③.冒泡階段
- 事件從目標元素向他的祖先元素傳遞，依次觸發祖先元素上的事件
- 如果希望在捕獲階段就觸發事件，可以將addEventListener()的第三個引數設定為true
一般情況下我們不會希望在捕獲階段觸發事件，所以這個引數一般都是false
- IE8及以下的瀏覽器中沒有捕獲階段
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/56032.html
標籤：JavaScript