目錄
1.注冊事件
注冊時間概述
addEventListener()
刪除事件
2.DOM事件流
DOM事件流理論
事件對象
事件對象的常見屬性和方法
e.targe 和?this的區別
阻止默認行為
阻止冒泡
事件委托
禁止右鍵菜單和禁止選中文字
獲得鼠標的坐標（可視區、頁面、瀏覽器）
常用鍵盤事件
keyCode判斷用戶按下的鍵的ASCII值
1.注冊事件
注冊時間概述
傳統注冊方式，特點是注冊時間是唯一的
方法監聽注冊方式，特點是同一個元素同一個事件樂意注冊多個監聽器
addEventListener()
eventTarget.addEventListener(type,listener[,useCapture])
type 事件類型字符串，比如click,mouseover，這里要注意不需要帶on了
listener事件處理函數，事件發生時，會調用該監聽函數
useCapture 可選參數，是一個布爾值，默認值是false
addEventListener(eventName,fn)? ? 不需要添加'on'
attachEvent? 中需要添加‘on’
刪除事件
傳統方式刪除? div[0].οnclick=null
第一種? 寫eventTarget.addEventListener('click',函數)，就是把函數體寫在了外面?里面的函數調用不用再加小括號
? ? ? ? ? div[0].addEventListener('click',fn)? ? ? ? //不要看圖片中的，這一步是要寫的
??????????function fn(){
? ? ? ? ? ? ? ? alert(22)
? ? ? ? ? ? ? ? div[1].removeEventListener('click',fn)
}
第二種，先寫eventTarget.attchEvent('onclick',函數) ，再同上寫
兩種寫法無非就是第二種比第一種多了“on”
2.DOM事件流
DOM事件流理論
捕獲階段從大到小，冒泡階段從小到大
事件發生時會在元素節點之間按照特定的順序傳播，這個傳播過程即DOM事件流
addEventListener(type,listener[,useCapture])? ?
addEventListener(type，function(){},true/false)
? 第三個參數如果是true，表示在事件捕獲階段調用事件處理程序；如果是false或者是省略，表示在事件冒泡階段調用事件處理程序
有些事件是沒有冒泡的，比如onblur 、onfocus 、onmouseenter、 onmouseleave
事件對象
eventTarget.οnclick=function(event){}
eventTarget.addEventListener('click',function(event){})
event就是事件對象,寫在函數的小括號中
標準瀏覽器中將event 單寫成e就可以識別，但是有些不能用，需要寫window.event來獲取查找
事件對象的常見屬性和方法
e.targe 和?this的區別
e.target 返回的是觸發事件的對象（元素）? ? ? this 返回的是綁定事件的對象（元素）
e.target? 點擊了哪個元素，就返回那個元素； this 不論點擊誰，返回的都是綁定事件
一些兼容性問題
阻止默認行為
返回事件類型
div.addEventListener('事件類型',調用函數)? ?函數中寫e.type
阻止默認行為（如讓鏈接不跳轉、點擊提交按鈕不提交）
普通瀏覽器 e.preventDefault()? ? ? 前面接受的對象（var）是鏈接或者按鈕
低版本瀏覽器 e.returnValue;
只限于傳統的注冊方式 return false
阻止冒泡
標準瀏覽器? e.stopPropagation()
低版本瀏覽器? e.cancelBubble=true? ? 可以先進行一個判斷
寫在函數中，可以組織后面的冒泡
事件委托
不是給每個子節點單獨設置事件監聽器，而是將事件監聽器設置在其父節點上，然后利用冒泡原理影響設置每個節點
綁定父級元素，在父級元素的函數中添加需求? ? e.target可以獲得點擊對象
禁止右鍵菜單和禁止選中文字
contextmenu主要控制應該何時顯示上下文菜單，主要用于程序員取消默認的上下文菜單
在函數中添加e.preventDefault()即可
selectstart 開始選中? （不能進行復制等操作）
在函數中添加e.preventDefault()即可
獲得鼠標的坐標（可視區、頁面、瀏覽器）
client 鼠標在可視區的x和y坐標? ?e.clientX x方向? ???e.clientY y方向
page 鼠標在文檔頁面的x和y坐標? ?e.pageX? x方向? ?e.pageY y方向
screen 鼠標在電腦屏幕的x和y坐標? ? ?e.screenX x方向? ? e.screenY y方向
移動天使
用到了mousemove的觸發方式，只要鼠標移動1px，事件就會被觸發
常用鍵盤事件
onkeyup 某個按鍵被松開時觸發
onkeydown? 某個按鍵被按下時觸發
onkeypress??某個按鍵被按下時觸發 但是它不識別功能鍵，比如ctrl、shift、箭頭等
使用addEventListener時不用加‘on’
三個時間的執行順序是：keydown-keypress-keyup
keyCode判斷用戶按下的鍵的ASCII值
onkeydown和onkeyup不區分大小寫? ? onkeypress區分大小寫
將時間方式定義為"keyup"或者其他，在函數中直接console.log(e)，就會出現點擊按鈕輸出的結果
輸入內容案例
用keyup而不用keydown，前者是彈開后進入判斷再去執行事件不會再輸入內容，而后者是直接輸入內容再去進行判斷
目標位置.focus()? focus直接定位到目標位置
這里寫的是document.addEventListener(),是因為是在整個網頁中點擊的，綁定的是整個網頁
快遞單號查詢
在大盒子中放兩個小盒子，一個是彈出的顯示大框，一個是輸入框
keydown和keypress在文本框中的特征：兩個事件觸發時，文字還沒有落進文本框?，而keyup觸發時文字已經落入文本框了
還有一個使用keyup的原因是，在按鍵的時候能先輸入文字，即文本框中有字，隱藏的框能檢測到value值不為空，所以能顯示出來；如果換成其他兩種形式，第一次在按鍵的時候，顯示大框不會彈出來
