一：js事件分為四大類：先說說常用的一些屬性
1.鍵盤事件：
onkeydown 鍵盤按下
onkeyup 鍵盤抬起
onkeypress 鍵盤按下
2.鼠標(biāo)事件：
注意：out和over會在鼠標(biāo)從父級移入子級的時候觸發(fā)虎敦，而enter和leave只有在移入和移出子級整體的時候觸發(fā)
onmoveover 鼠標(biāo)移入
onmouseout 鼠標(biāo)移出
onmouseenter 鼠標(biāo)移入
onmouseleave 鼠標(biāo)移出
onmousedown 鼠標(biāo)按下
onmouseup 鼠標(biāo)抬起
ondblclick 鼠標(biāo)雙擊
oncontextmenu 鼠標(biāo)右鍵
3.表單事件：
onsubmit 表單提交：點(diǎn)擊的是提交按鈕碗殷，form表單觸發(fā)onsubmit
onreset 表單重置
onfocus 獲取焦點(diǎn)
__注意：一些事件中，系統(tǒng)會有默認(rèn)事件觸發(fā)，比如右鍵的時候會彈出來菜單，比如按了提交按鈕跳轉(zhuǎn)網(wǎng)頁。這些都是默認(rèn)事件。默認(rèn)事件可以被阻止
return false;
4.移動端事件
ontouchstart 相當(dāng)于鼠標(biāo)按下onmousedown
ontouchmove 相當(dāng)于鼠標(biāo)移動onmousemove
ontouchend 等價于 鼠標(biāo)抬起onmouseup
二：事件對象
以keydown為例
注意:keydown支持特殊按鍵，如：command shift 但不區(qū)分大小寫 A 和 a 的keyCode都是65; keypress不支持特殊按鍵,keyCode區(qū)分大小寫
document.onkeydown = function(ev){
// 獲取事件對象可以使用window.event龟虎，注意：在火狐或取不到
// 在火狐需要通過參數(shù)獲取
// 兼容寫法
var evObj = window.event || ev;
console.log(evObj.keyCode);
// 如何判斷是否按了組合鍵
if(evObj.keyCode == 67 && evObj.metaKey){
console.log("按了command + c");
}
}
1.evObj.keyCode 每個按鍵對應(yīng)一個數(shù)字編碼
2.evObj.target 觸發(fā)了事件的元素，觸發(fā)事件的元素不一定是綁定事件的元素
3.evObj.offsetX/Y 鼠標(biāo)距離自身的距離
4.evObj.clientX/Y 鼠標(biāo)距離屏幕的距離
5.evObj.pageX/Y 鼠標(biāo)距離頁面的距離
三：事件綁定
第一種就是上面例子代碼沙庐，但第一種不能綁定多個事件鲤妥；而下面的這種可以綁定多個事件佳吞。
1.非IE綁定事件的方法
格式: 元素.addEventListener("不包含on的事件名",時間對應(yīng)的函數(shù),是否在鋪獲階段觸發(fā)false這或者true);
redDiv.addEventListener("click",function(){
console.log("2");
},false);
2.IE綁定事件的方法
redDiv.attachEvent("click",function(){
console.log("2");
},false);
3.兼容寫法
**** 參數(shù)：
**** element:代表要綁定的事件
**** type:要綁定的事件名(不含on)
**** fn:要綁定的事件對應(yīng)的函數(shù)
function addEvent(element,type,fn){
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on" + type,fn);
}else{
element["on" + type]= fn;
}
}
