註冊事件
-
給元素添加事件，稱爲註冊事件或者綁定事件。
-
註冊事件有兩種方式：傳統方式和方法監聽註冊方式。
1.傳統註冊方式：
（1）利用on開頭的事件，比如：onclick
（2）< button οnclick=“alert(‘hello’)”>< /button>
（3）btn.onclick = function(){ }
（4）特點：註冊事件的唯一性。簡單來收，就是同一個元素同一個事件只能設置一個處理函數，最後註冊的處理函數將會覆蓋前面註冊的處理函數
2.方法監聽註冊方式：
（1）W3C標準推薦的方式
（2）addEventListener()是一個方法
（3）IE9之前的IE不支持此方法，可使用attachEvent()代替
（4）特點：同一個元素同一個事件可以註冊多個監聽器
（5）按註冊順序依次執行
-
addEventListener事件監聽方式：
//addEventListener()的語法格式如下：
eventTarget.addEventListener(type, listener[,userCapture]);
//舉例：
var div = document.querySelector('div');
div.addEventListener('click',function(){
alert('Hello');
})
-
eventTarget.addEventListener()方法將指定的監聽器註冊到eventTarget（目標對象）上，當該對象觸發指定的事件時，就會執行事件處理函數。
-
該方法接收三個參數：
1.type：事件類型字符串，比如：click、mouseover，注意這不要帶on，並且該屬性是字符串，一定要加引號。
2.listener：事件處理函數，事件發生時，會調用該監聽函數。
3.userCapture：可選參數，是一個布爾值，默認是false。
-
attachEvent()：該特性是非標準的，儘量不要在生產環境中使用。（IE8及早期版本支持）
//attachEvent()的語法格式如下：
eventTarget.attachEvent(eventNameWithOn, callback)
-
eventTarget.attachEvent()方法將指定的監聽器註冊到eventTarget（目標對象）上，當該對象觸發指定的事件時，指定的回調函數就會被觸發。
-
該方法接收兩個參數：
1.eventNameWithOn：事件類型字符串，比如：onclick、onmouseover，注意要帶on。
2.callback：事件處理函數，當目標觸發事件時回調函數被調用。
-
註冊事件兼容性解決方案（瞭解即可）：
function addEventListener(element, eventName, fn){
//判斷當前瀏覽器是否支持addEventListener方法
if(element.addEventListener){
element.addEventListener(eventName, fn); //第三個參數默認是false
}else if(element.attachEvent){
element.attachEvent('on' + eventName, fn);
}else{
//相當於element.onclick = fn;
element['on' + eventName] = fn;
}
}
刪除事件（解綁事件）
-
刪除事件的方式
1.eventTarget.onclick = null;
2.eventTarget.removeEventListener(type, listener[,userCapture]);
var div = document.querySelector('div'); div.addEventListener('click',fn); // 裏面的fn不需要加小括號調用 function fn(){ alert('蟹黃堡'); div.removeEventListener('click', fn); //由於該刪除事件方法中需要把元素註冊的事件處理函數作 //爲參數，但沒法直接寫，所以需要把註冊事件的事件處理 //函數分開單獨寫。 }3.eventTarget.detachEvent(eventNameWithOn, callback);
4.刪除事件兼容性解決方案（瞭解即可）：
function removeEventListener(element, eventName, fn){ //判斷當前瀏覽器是否支持removeEventListener方法 if(element.removeEventListener){ element.removeEventListener(eventName, fn); //第三個參數默認是false }else if(element.detachEvent){ element.detachEvent('on' + eventName, fn); }else{ element['on' + eventName] = null; } }
DOM事件流
-
事件流描述的是從頁面中接收事件的順序。簡單來說，事件發生時會在元素節點之間按照特定的順序傳播，這個傳播過程就是DOM事件流。
-
DOM事件流分爲3個階段：
1.捕獲階段
2.當前目標階段
3.冒泡階段
-
舉例：一個div註冊了點擊事件，那麼它的DOM事件流如下圖所示：
- 事件冒泡：IE最早提出，事件開始時由最具體的元素接收，然後逐級向上傳播到DOM最頂層節點到過程。
- 事件捕獲：網景最早提出，由DOM最頂層節點開始，然後逐級向下傳播到最具體的元素接收的過程。
注意：
- JS代碼只能處於捕獲或冒泡其中的一個階段。
- onclic和attachEvent只能得到冒泡階段。
- addEventListener(type, listener[,userCapture])第三個參數如果是ture，表示在事件捕獲階段調用事件處理程序；如果是false(不寫默認就是false)，表示在事件冒泡階段調用事件處理程序。
- 實際開發中，我們很少使用事件捕獲，而是更加關注事件冒泡。
- 有些事件是沒有冒泡的，比如：onfocus、onblur、onmouseenter、onmouseleave。
- 事件冒泡有利有弊，可能會帶來麻煩，也可能帶來意想不到的好處。
事件對象
- event對象代表事件的狀態，比如鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。簡單理解，事件發生後，跟事件相關的一系列信息數據的集合都放到這個對象裏面，這個對象就是事件對象event，她有很多屬性和方法。
//情況1:
eventTarget.onclick = function(event){}
//情況2:
eventTarget.addEventListener('click', function(event){})
//這個event就是事件對象，還可以寫成e、evt等其他自定義名稱
-
這個event是個形參，系統幫我們設定爲事件對象，不需要傳遞實參過去。
-
主要我們註冊事件，event對象就會被系統自動創建，並依次傳遞給事件監聽器（事件處理函數）。
-
事件對象本身的獲取存在兼容性問題：
1.標準瀏覽器中是瀏覽器給方法傳遞的參數，只需要定義形參e就可以獲取到。
2.在IE6～8中，瀏覽器不會給方法傳遞參數，如果需要的話，需要到window.event中獲取查找。
-
兼容性解決方法：
e = e || window.event;
- 事件對象的常見屬性和方法：
| 事件對象屬性方法 | 說明 |
|---|---|
| e.target | 返回觸發事件的對象（標準） |
| e.srcElement | 返回觸發對象的事件（非標準，IE6～8使用） |
| e.type | 返回事件的類型，比如：click、mouseover等，不帶on |
| e.stopPropagation() | 該方法阻止冒泡（標準） |
| e.cancelValue | 該屬性阻止冒泡（非標準，IE6～8使用），使用方法：e.cancelValue = true |
| e.preventDefault() | 該方法阻止默認事件（默認行爲）比如，不讓連接跳轉或者讓提交按鈕不提交等（標準） |
| e.retuenValue | 該方法阻止默認事件（默認行爲）比如，不讓連接跳轉或者讓提交按鈕不提交等（非標準，IE6～8使用） |
- e.target和this的區別：e.target返回的是觸發事件的對象（元素）；而this返回的是綁定事件的對象（元素）。
- this和currentTarget的區別：this和currentTarget都是返回綁定事件的對象（元素），但是currentTarget有兼容性問題，IE6～8不能使用。
- return false和e.preventDefault()、e.returnValue一樣，都能阻止默認行爲，但是return false後面的代碼將不會被執行，並且只適用於傳統註冊事件的方式（div.onclick = fuction() (){}）。
事件委託
- 事件委託也稱爲事件代理，在jQuery裏面稱爲事件委派。
- 原理：不是每個子節點單獨設置事件監聽器，而是事件監聽器設置在其父節點上，然後利用冒泡原理影響設置每個子節點。
- 作用：只需要操作一次DOM，提高了程序等性能。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
//1.
//alert('Hello!');
//2.
e.target.style.background = 'blue';
})
常用的鼠標事件
-
禁止鼠標右鍵菜單
contextmenu主要控制應該何時顯示上下文菜單，主要用於程序員取消默認的上下文菜單。
document.addEvnetListener('contextmenu',function(e){ e.preventDafault(); }) -
禁止鼠標選中（selectstart 開始選中）
document.addEventListener('selectstart',function(e){ e.preventDefault(); }) -
鼠標事件對象（MouseEvent）
| 鼠標事件對象（屬性） | 說明 |
|---|---|
| e.clientX | 返回鼠標相對於瀏覽器窗口可視區的X座標 |
| e.clientY | 返回鼠標相對於瀏覽器窗口可視區的Y座標 |
| e.pageX | 返回鼠標相對於文檔頁面的X座標，IE9+支持 |
| e.pageY | 返回鼠標相對於文檔頁面的Y座標，IE9+支持 |
| e.screenX | 返回鼠標相對於電腦屏幕的X座標 |
| e.screenY | 返回鼠標相對於電腦屏幕的Y座標 |
常用鍵盤事件
- 鍵盤事件
| 鍵盤事件 | 觸發條件 |
|---|---|
| onkeyup | 某個鍵盤按鍵被鬆開時觸發 |
| onkeydown | 某個鍵盤按鍵被按下時觸發 |
| onkeypress | 某個鍵盤按鈕被按下時觸發，但是它不識別功能鍵，比如：ctrl、shift、箭頭等 |
注意：
1.如果使用addEventListener不需要加on。
2.三個事件的執行順序是：keydown——>keypress——>keyup。
- 鍵盤事件對象（KeyboardEvent）
| 鍵盤事件對象（屬性） | 說明 |
|---|---|
| keyCode | 返回該鍵的ASCII值 |
注意：
1.onkeydown和onkeyup不區分字母大小寫，onkeypress區分字母大小寫，比如按下a鍵或A鍵，keydown和keyup的keyCode都是65，而keypress則會區分，a鍵是97，A鍵是65。
2.在我們實際開發中，更多使用的是keydown和keyup，它們能識別所有的鍵（包括功能鍵）。
3.keypress不識別功能鍵，但是keyCode屬性能區分大小寫，返回不同的ASCII值。
4.可以利用keyCode返回的ASCII值來判斷用戶按下哪個鍵。
5.keydown和keypress在文本框裏面的特點：它們兩個事件觸發的時候，文字還沒有落入文本框中；而keyup事件觸發的時候，文本已經落入文本框裏面了。
課外知識點
-
focus()方法可以使搜索框獲得焦點。比如：input.focus()。
-
通過::before或::after創建的元素的隱藏與顯示和被選元素的隱藏與顯示是同步的。
微信公衆號也會定期更新，覺得文章寫得還可以的，可以加個關注！點個贊！謝謝！
