什么是事件妇蛀？
文檔（html元素及document）或者瀏覽器的窗口發(fā)生的一些特定的交互瞬間主届；可以監(jiān)聽這些事件脆霎，來(lái)實(shí)現(xiàn)在事件發(fā)生時(shí)執(zhí)行特定的操作；
元素天生自帶的默認(rèn)行為,不論我們是否給其綁定了方法滞项，當(dāng)我們操作的時(shí)候狭归，也會(huì)把對(duì)應(yīng)的事件觸發(fā)；
let btn = document.querySelector('.btn');
let box = document.querySelector('.box');
常用的事件行為
[鼠標(biāo)事件]
- click 點(diǎn)擊（移動(dòng)端click被識(shí)別為單擊）
- dblclick 雙擊
- mousedown 鼠標(biāo)按下
- mouseup 鼠標(biāo)抬起
- mousemove 鼠標(biāo)移動(dòng)
- mouseover 鼠標(biāo)滑過(guò)
- mouseout 鼠標(biāo)滑出
- mouseenter 鼠標(biāo)進(jìn)入
- mouseleave 鼠標(biāo)離開
- onmousewheel 鼠標(biāo)滾輪滾動(dòng)
[鍵盤事件]
一般input文判、textarea过椎、document.body、document律杠、window潭流、document.documentElement 監(jiān)聽鍵盤事件
- keydown 按下某個(gè)鍵
- keyup 抬起某個(gè)鍵
- keypress 除Shift/Fn/CapsLock鍵以外竞惋，其它鍵按坠袢ァ（連續(xù)觸發(fā)）
let input = document.querySelector('#input');
input.onkeydown = function () {
console.log('123')
};
document.onkeyup = function () {
console.log('keyup')
};
window.onkeydown = function () {
console.log('window key down')
};
/=>鍵盤事件對(duì)象
code & key：存儲(chǔ)的都是按鍵，code更細(xì)致 // code: "KeyF" key: "F"
keyCode & which：存儲(chǔ)的是鍵盤按鍵對(duì)應(yīng)的碼值 // keyCode: 70 which: 70
方向鍵：37 38 39 40 =>左上右下
空格SPACE 32
回車ENTER 13
回退BACK 8
刪除DEL 46
SHIFT 16
CTRL 17
ALT 18
[移動(dòng)端手指事件]
- touchstart 手指按下
- touchmove 手指移動(dòng)
- touchend 手指松開
- touchcancel 操作取消（一般應(yīng)用于非正常狀態(tài)下操作結(jié)束）
多手指事件模型 Gesture
- gesturestart
- gesturechange / gestureupdate
- gestureend
- gesturecancel
[表單元素常用事件]
oninput input拆宛、textarea 等元素的輸入事件
- onfocus 獲取焦點(diǎn)（光標(biāo)）事件
- onblur 失去焦點(diǎn)時(shí)觸發(fā)
- onchange 事件嗓奢，表單的值（value）發(fā)生改變時(shí)觸發(fā)
input.onfocus = function () {
console.log('獲取焦點(diǎn)')
};
input.onblur = function () {
console.log('失去焦點(diǎn)')
};
input.oninput = function () {
console.log(this.value);
};
[系統(tǒng)事件]
- window.onload 頁(yè)面中所有的資源全部加載完觸發(fā)
- window.onresize 當(dāng)前窗口尺寸發(fā)生改變時(shí)觸發(fā)
- window.onsroll 滾動(dòng)條滾動(dòng)時(shí)觸發(fā)
- unload 資源卸載
- beforeunload 當(dāng)前頁(yè)面關(guān)閉之前
- error 資源加載失敗
- scroll 滾動(dòng)事件
- readystatechange AJAX請(qǐng)求狀態(tài)改變事件
- contextmenu 鼠標(biāo)右鍵觸發(fā)
window.onresize = function () {
console.log('變了、變了');
};
[音視頻常用事件]
- canplay 可以播放（資源沒有加載完浑厚，播放中可能會(huì)卡頓）
- canplaythrough 可以播放（資源已經(jīng)加載完股耽，播放中不會(huì)卡頓）
- play 開始播放
- playing 播放中
- pause 暫停播放
DOM0
元素.on事件行為 = function(){}
DOM0事件綁定的原理:
給元素的私有屬性賦值，當(dāng)事件觸發(fā)钳幅，瀏覽器會(huì)幫我們把賦的值執(zhí)行物蝙，但是這樣也導(dǎo)致 “只能給當(dāng)前元素某一個(gè)事件行為綁定一個(gè)方法”
box.onclick = function () {console.log('哈哈哈')};
box.onclick = function () {console.log('呵呵呵')};
// 每次點(diǎn)擊只輸出呵呵呵
清除直接設(shè)置為null即可
box.onclick = function () {console.log('呵呵呵')
box.onclick = null;
};
box.onclick = function () {
console.log('哈哈哈~~');
//=>移除事件綁定：DOM0直接賦值為null即可
box.onclick = null;
}
DOM2
事件綁定:
ele.addEventListener('不帶on的事件名',函數(shù),是否捕獲)
事件解除:(重要的是解除綁定)
ele.removeEventListener('不帶on的事件名',有名函數(shù)(和綁定函數(shù)一個(gè)地址),是否捕獲)
DOM2事件綁定的原理：
基于原型鏈查找機(jī)制，找到EventTarget.prototype上的方法并且執(zhí)行敢艰，此方法執(zhí)行诬乞，會(huì)把給當(dāng)前元素某個(gè)事件行為綁定的所有方法，存放到瀏覽器默認(rèn)的事件池中（綁定幾個(gè)方法，會(huì)向事件池存儲(chǔ)幾個(gè)）震嫉，當(dāng)事件行為觸發(fā)森瘪，會(huì)把事件池中存儲(chǔ)的對(duì)應(yīng)方法，依次按照順序執(zhí)行 “給當(dāng)前元素某一個(gè)事件行為綁定多個(gè)不同方法”
box.addEventListener('click', function () {
console.log('哈哈哈~~');
}, false);
box.addEventListener('click', function () {
console.log('呵呵呵~~');
}, false);
點(diǎn)擊一次票堵，輸出2次內(nèi)容 哈哈哈~~ 呵呵呵~~
//DOM2事件綁定的時(shí)候扼睬，我們一般都采用實(shí)名函數(shù)
//>目的：這樣可以基于實(shí)名函數(shù)去移除事件綁定
function fn() {
console.log('哈哈哈~~');
//=>移除事件綁定：從事件池中移除，所以需要指定好事件類型悴势、方法等信息（要和綁定的時(shí)候一樣才可以移除）
box.removeEventListener('click', fn, false);
}
box.addEventListener('click', fn, false);
//false表示在冒泡階段執(zhí)行此方法窗宇，true表示在捕獲階段執(zhí)行此方法，默認(rèn)為false
DOM0只能在目標(biāo)階段和冒泡階段觸發(fā)執(zhí)行;
DOM2可以控制在捕獲階段觸發(fā);
練習(xí)一下
function fn1() { console.log(1); }
function fn2() { console.log(2); }
function fn3() { console.log(3); }
function fn1() { console.log(1); }
function fn2() { console.log(2); }
function fn3() { console.log(3); }
box.onclick = fn1
box.onclick = fn2
box.addEventListener('click', fn2, false);
box.addEventListener('click', fn3, true);
box.addEventListener('click', fn1, false);
box.onclick = function(){console.log('哈哈哈~');}
box.addEventListener('click', fn2, true);
//=>基于addEventListener向事件池增加方法特纤，存在去重的機(jī)制 “同一個(gè)元素担映，同一個(gè)事件類型，在事件池中只能存儲(chǔ)一遍這個(gè)方法叫潦，不能重復(fù)存儲(chǔ)”
box.addEventListener('click', fn1, false);
box.addEventListener('mouseover', fn1, false);
最后編輯于 ：?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者