1.什么是事件
通過鍵盤或鼠標操作頁面，讓頁面發(fā)生變化時捷兰，都會產(chǎn)生一個事件對象我們可以通過這個事件對象獲取必要的信息立叛，比如：點擊事件的點擊坐標，鍵盤事件的按鍵位置等
2.事件對象
A寂殉。獲取對象：
通過window對象下的event屬性來獲取當前事件產(chǎn)生的事件對象
window.event;
event;
在老式瀏覽器中囚巴，事件對象是通過事件函數(shù)的形式傳遞進來的
兼容性寫法使用邏輯或表達式判斷那種形式可以獲取到事件對象原在，并把那種形式獲取到的對象返回出來
document.onclick=function(ev){
(獲取到點擊事件產(chǎn)生的事件對象)
var eventObj=ev||event;
}
document.onkeydown=function(ev){
(獲取到鍵盤事件按下的事件對象)
var eventObj=ev||event;
}
總結(jié)
任何事件(瀏覽器觸發(fā)或用戶觸發(fā))被觸發(fā)后友扰，都會產(chǎn)生一個事件對象彤叉。而這個事件對象中的屬性以及屬性值，是由該對象的事件決定的
B村怪。通過對象：
用戶對頁面進行操作時都是事件秽浇，我們可以給事件綁定一個函數(shù)，當用戶觸發(fā)該事件后甚负，事件所綁定的函數(shù)才被執(zhí)行
點擊對象的常用屬性
clientX\clientY:獲取到的是鼠標點擊的當前位置距離瀏覽器左邊框和頂邊框的間距
offsetX\offsetY:獲取到的是鼠標點擊的位置距離當前點擊標簽的左邊框和頂邊框的距離（自己的標簽）
screenX\screenY:獲取到的是鼠標點擊的位置距離整個屏幕左邊框和頂邊框的間距
pageX\pageY:獲取到的是鼠標點擊的位置距離整個文檔（頁面）的左邊框和頂邊框的間距
3.鼠標事件mouse
鼠標點擊事件：click(用戶按下并抬起鼠標左鍵)柬焕；
按下鼠標左鍵事件mousedown
div.onmousedown=function(){}
抬起鼠標左鍵事件mouseup
div.onmouseup=function(){}
click事件：執(zhí)行了mousedown和mouseup之后才觸發(fā)事件
mousedown事件當鼠標按下時觸發(fā)
mouseup事件當鼠標抬起時觸發(fā)
如果事件是需要按下并抬起才能觸發(fā)，則使用click事件
如果鼠標按下梭域，抬起需要發(fā)出兩個不同的事件斑举，按下使用mousedown事件，抬起使用mouseup而不是click
為避免沖突病涨，mouseup和click事件盡量不要在同一個標簽上同時使用
鼠標移入div標簽mouseover從外到內(nèi)的
div.onmouseover=function(){}
鼠標移出標簽內(nèi)部mouseout從內(nèi)到外
div.onmouseout=function(){}
鼠標在標簽內(nèi)部移動mousemove只要鼠標在標簽內(nèi)部移動富玷，就會不斷的觸發(fā)該事件，可以通過該事件產(chǎn)生的事件對象不斷獲取當前鼠標移動的位置
div.onmousemove=function(){}
雙擊事件
div.dblclick=function(){}
定制右鍵菜單
document.oncontextmenu=function(){}
清楚默認的事件樣式return false;
4.鍵盤事件
document.onkeydown=function(ev){}
鍵盤按鍵事件對象保存著當前按下的鍵位信息既穆。我們可以通過keycode獲取到獲取到當前用戶按下的是那個按鍵
enter 13赎懦；
a-z：65-90；
0-9： 48-57匾二；
左上右下方向鍵37,38,39,40屈呕；
Alt\shift\ctrl按下時噩茄，對應的屬性值是true
左右shift區(qū)分：location屬性值是1表示左，2表示右邊的
例如：(模擬留言板)
window.onload=function(){
var div=document.querySelector('div');
var txt=document.querySelector('input');
text.onkeydown=function(ev){
var eventObj=ev||event;
if(eventObj.ctrlKey==true&&eventObj.keyCode==13){
if(text.length==0){
txt.placeholder='請輸入文字';
}else{
var p=document.createElemet('p');
var code=txt.value;
p.innerHTML='code';
div.appendChild(p);
txt.value='';
}
}
}
