一、event （事件源）
1查蓉、在 DOM 中發(fā)生事件時赫段，所有相關(guān)信息都會被收集并存儲在一個名為 event 的對象中呀打。這個對象包含了一些基本信息，比如導(dǎo)致事件的元素糯笙、發(fā)生的事件類型贬丛，以及可能與特定事件相關(guān)的任何其他數(shù)據(jù)。
2给涕、關(guān)于事件的組成 元素.on事件名 = 處理函數(shù)
- 處理函數(shù) 是一個function 作為一個function 他具備一個arguments（參數(shù)數(shù)組）
- 因為arguments[0] 是獲取第一個參數(shù) 那么我在對應(yīng)的處理函數(shù)里面寫一個參數(shù)這個參數(shù)不就是對應(yīng)的arguments[0]
- 我們發(fā)現(xiàn)對應(yīng)的arguments[0] 返回的對應(yīng)對象是一個event類型的對象 所以我們可以猜出來他設(shè)計了一個名event的對象 而這個對象同時又是全局的對象 所以他歸屬于window 所以我們可以寫成 window.event 或者省略對應(yīng)的window（event）
//e是形參 相當(dāng)于第一個形參 常見的寫法 這個形參名字叫 e 或者 event
window.onkeydown = function(e){
console.log(e); //這個就是arguments[0] event類型對象
//他設(shè)計一個event對象 他是一個全局的變量 window.event
//ie為了兼容 我們會寫出
e = e || window.event //兼容寫法
console.log(e.altKey);
console.log(e.key);
}
二豺憔、 屬性
1、 坐標(biāo)相關(guān)的屬性
x 得到鼠標(biāo)的x坐標(biāo)（不包含不可視區(qū)域）
y 得到鼠標(biāo)的y坐標(biāo) （不包含不可視區(qū)域）
pageX 得到鼠標(biāo)在頁面上的x坐標(biāo) （包含不可視區(qū)域）
pageY 得到鼠標(biāo)在頁面上的y坐標(biāo) （包含不可視區(qū)域）
clientX 得到鼠標(biāo)在可視區(qū)域內(nèi)的x坐標(biāo) （不包含不可視區(qū)域）
clientY 得到鼠標(biāo)在可視區(qū)域內(nèi)的y坐標(biāo) （不包含不可視區(qū)域）
offsetX 得到鼠標(biāo)在偏移元素內(nèi)容的x坐標(biāo) （當(dāng)前添加事件的元素里面的坐標(biāo) 不包含border）
offsetY 得到鼠標(biāo)在偏移元素內(nèi)容的y坐標(biāo) （當(dāng)前添加事件的元素里面的坐標(biāo) 不包含border）
layerX 默認(rèn)是得到鼠標(biāo)基于頁面的x坐標(biāo) 當(dāng)你添加定位以后他是基于定位元素的坐標(biāo)
layerY 默認(rèn)是得到鼠標(biāo)基于頁面的y坐標(biāo) 當(dāng)你添加定位以后他是基于定位元素的坐標(biāo)
screenX 得到鼠標(biāo)在屏幕的上的x坐標(biāo)
screenY 得到鼠標(biāo)在屏幕上的y坐標(biāo)
2够庙、按鍵的相關(guān)屬性
altKey 是否長按alt鍵
ctrlKey 是否長按ctrl鍵
shiftKey 是否長按shift鍵
3恭应、鼠標(biāo)相關(guān)的內(nèi)容（只有鼠標(biāo)觸發(fā)的事件有）
button 返回的值為number類型（0 表示左鍵 1表示中間 2表示右鍵）
4、事件觸發(fā)的相關(guān)屬性
type 事件類型 返回對應(yīng)的事件名
target 目標(biāo)元素 返回真實觸發(fā)的事件元素
currentTarget 目標(biāo)元素 返回當(dāng)前添加事件的元素
bubbles 事件是否冒泡
5首启、鍵盤事件相關(guān)的內(nèi)容（需要鍵盤來觸發(fā)的事件）
key 屬性 （當(dāng)前按下的鍵）
keycode 屬性 （獲取當(dāng)前按下鍵大寫的ascii碼）
charCode 屬性（字符鍵 press事件 ascii碼）
三暮屡、事件流
概述：事件流描述了頁面接收事件的順序。多個盒子嵌套相同事件毅桃，這個時候你觸發(fā)一個盒子的事件褒纲，并不會只執(zhí)行一個盒子的事件的處理函數(shù)，而是全部執(zhí)行钥飞。
1莺掠、事件流的倆種模式
1.1 冒泡模式（瀏覽器采用的）
IE 事件流被稱為事件冒泡，這是因為事件被定義為從最具體的元素（文檔樹中最深的節(jié)點）開始觸發(fā)读宙，然后向上傳播至沒有那么具體的元素（文檔）彻秆。
阻止事件冒泡
e.stopPropagation() 函數(shù) （*）（stop）
e.cancelBubble = true 屬性設(shè)置（現(xiàn)在雖然都可以用 但是未來可能會廢棄）
兼容寫法
e.stopPropagation?e.stopPropagation():e.cancelBubble = true
捕獲模式
事件捕獲的意思是最不具體的節(jié)點應(yīng)該最先收到事件，而最具體的節(jié)點應(yīng)該最后收到事件结闸。事件捕獲實際上是為了在事件到達最終目標(biāo)
前攔截事件唇兑。
四、默認(rèn)行為
就是一個元素會自帶的行為稱為默認(rèn)行為 a標(biāo)簽的默認(rèn)行為會跳轉(zhuǎn) form標(biāo)簽里面submit按鈕默認(rèn)會提交（刷新頁面）鼠標(biāo)右鍵會出現(xiàn)一個菜單欄 等等一系列的問題
有些時候我們不需要這些行為的產(chǎn)生 那么我們就需要阻止默認(rèn)行為
阻止默認(rèn)行為的js實現(xiàn)
e.preventDefault() 函數(shù) （*） （prevent）
e.returnValue = false ie的兼容
return false 直接結(jié)束對應(yīng)的操作
e.preventDefault?e.preventDefault():e.returnValue = false //兼容
五桦锄、拖拽
思路
- 給拖拽的元素添加mousedown的事件 記錄當(dāng)前點擊的位置
- 給對應(yīng)的容器添加mousemove事件 記錄每次移動的位置
- 給對應(yīng)的容器添加mouseup 事件 清除上述mousemove事件
代碼實現(xiàn)
//獲取div
var box = document.getElementById('box')
//給div添加mousedown事件
box.onmousedown = function(e){
e = e || event
//記錄的是鼠標(biāo)在div里面的位置
//在mousedown里面記錄按下的位置
var x = e.offsetX
var y = e.offsetY
// var x = e.pageX-box.offsetLeft
// var y = e.pageY-box.offsetTop
//給document添加mousemove事件
document.onmousemove = function(e){
e = e || event
//記錄每次的位置 在document里面的位置
var currentX = e.pageX
var currentY = e.pageY
//并且設(shè)置div的位置
box.style.left = currentX - x + "px"
box.style.top = currentY - y + "px"
}
//給document添加mouseup事件
document.onmouseup = function(){
//清除對應(yīng)的mousemove事件
document.onmousemove = null
}
}
六扎附、樣式獲取
style屬性 只能獲取標(biāo)簽內(nèi)容style屬性里面存在的一些樣式
如果你需要獲取對應(yīng)的全局所有地方設(shè)置樣式 我們就需要采用一些方法
getComputedStyle 方法屬于window的方法
window.getComputedStyle(元素對象,null) //返回給你的是一個樣式對象
ie兼容
element.currentStyle //返回給你一個樣式對象
兼容封裝
//方法的封裝
function getStyle(element,attr){
var style = window.getComputedStyle?window.getComputedStyle(element):element.currentStyle
return style[attr]
}
//調(diào)用
console.log(getStyle(box,'height'));
