// 事件處理函數的一個標準特性是:以某些方式訪問的事件對象包含有關于當前事件的上下文信息;// 事件處理由三部分組成:對象.事件處理函數=函數;  document.onclick = function(){    alert('Lee');  }  // PS:以上程序解釋:click表示一個事件類型,單擊;  // onclick:表示一個事件處理函數或綁定對象的屬性(或者叫事件監(jiān)聽器);  // document:表示一個綁定的對象,用于觸發(fā)某個元素區(qū)域;  // function():匿名函數是被執(zhí)行的函數,用于觸發(fā)后執(zhí)行;// 除了用匿名函數的方法作為被執(zhí)行的函數,也可以設置成獨立的函數;  document.onclick = box;                // 直接賦值函數名即可,無須括號;  function box(){    alert('Lee');  }// this關鍵字和上下文// 在 面向對象 那章我們了解到:在一個對象里,由于作用域的關系,this代表著離它最近的對象;  var input = document.getElementsByTagName('input')[0];  input.onclick = function(){    alert(this.value);                // HTMLInputElement,this表示input對象;  }

// 當觸發(fā)某個事件時,會產生一個事件對象,這個對象包含著所有與事件有關的信息;// 包括導致事件的元素/事件的類型/以及其它與特定事件相關的信息;// 事件對象,我們一般稱作為event對象,這個對象是瀏覽器通過函數把這個對象作為參數傳遞過來的;// 首先,我們必須驗證一下,在執(zhí)行函數中有沒有傳遞參數,是否可以得到隱藏的參數;  function box(){                   // 普通空參函數;    alert(arguments.length);            // 0;沒有得到任何傳遞的參數;  }  input.onclick = function(){             // 事件綁定的執(zhí)行函數;    alert(arguments.length);            // 1;得到一個隱藏參數;  }  // PS:通過上面兩組函數,我們發(fā)現,通過事件綁定的執(zhí)行函數是可以得到一個隱藏參數的;  // 說明,瀏覽器會自動分配一個參數,這個參數其實就是event對象;  input.onclick = function(){    alert(arguments[0]);              // MouseEvent,鼠標事件對象;  }  // 上面這種做法比較麻煩,那么比較簡單的做法是,直接通過接收參數來得到即可;  input.onclick = function(evt){           // 接受event對象,    alert(evt);                  // MouseEvent,鼠標事件對象;  }  // 直接接收event對象,是W3C的做法,IE不支持,IE自己定義了一個event對象,直接在window.event獲取即可;  input.onclick = function(evt){    var e = evt || window.event;    alert(e);                   // 實現跨瀏覽器兼容獲取event對象;  }

// 只有在主鼠標按鈕被單擊時(一般是鼠標左鍵)才會觸發(fā)click事件,因此檢測按鈕的信息并不是必要的;// 但對于mousedown和mouseup事件來說,則在其event對象存在一個button屬性,表示按下或釋放按鈕;  　　 非IE(W3C)中的button屬性  值           說明   0       表示主鼠標按鈕(一般是鼠標左鍵);  1       表示中間的鼠標按鈕(鼠標滾輪按鈕);  2       表示次鼠標按鈕(一般是鼠標右鍵);    IE中的button屬性   1       表示主鼠標按鈕(一般是鼠標左鍵);  2       表示次鼠標按鈕(一般是鼠標右鍵);  4       表示按下了中間的鼠標按鈕;// 鼠標按鈕兼容;  function getButton(evt){    var e = evt || window.event;    if(evt){                // Chrome瀏覽器支持W3C和IE標準;      return e.button;          // 要注意判斷順序;    }else if(window.event){      switch(e.button){        case 1:          return 0;        case 4:          return 1;        case 2:          return 2;      }    }  }  document.onmouseup = function(evt){    if(getButton(evt) == 0){      alert('按下了鼠標左鍵!');    }else if(getButton(evt) == 1){      alert('按下了中鍵');    }else if(getButton(evt) == 2){      alert('按下了右鍵!');    }  }

// 事件對象提供了兩組來獲取瀏覽器坐標的屬性:// 一組是頁面可視區(qū)坐標;// 一組是屏幕坐標;    坐標屬性  屬性       說明  clientX     可視區(qū)X坐標,距離左邊框的距離;  clientY     可視區(qū)Y坐標,距離上邊框的距離;  screenX     屏幕區(qū)X坐標,距離左屏幕的距離;  screenY     屏幕區(qū)Y坐標,距離上屏幕的距離;  pageX      頁面中X坐標,距離整個頁面左邊框的距離;  pageY      頁面中Y坐標,距離整個頁面上邊框的距離;// 判斷鼠標點擊位置函數;  document.onclick = function(evt){    var e = evt || window.event;    alert(e.clientX+','+e.clientY);    alert(e.screenX+','+e.screenY);    alert(e.pageX+','+e.pageY);  }  // PS:在頁面沒有滾動的情況下,pageX和pageY的值與clientX和clientY的值相等;  // IE8以下不支持事件對象上的頁面坐標,不過使用客戶區(qū)坐標和滾動信息可以計算出來;  // 這時候需要用到document.body(混雜模式)或document.documentElement(標準模式)中的scrollTop和scrollLeft屬性;  // pageX和pageY兼容函數;  var div = document.getElementById('myDiv');  addEventListener(div,'click',function(evt){    var evt = event || window.event;    var pageX = evt.pageX,      pageY = evt.pageY;    if(pageX === undefined){      pageX = evt.clientX+(docuemnt.body.scrollLeft || document.documentElement.scrollLeft);    }    if(pageY === undefined){      pageY = evt.clientY+(document.body.scrollTop || document.documentElement.srollTop);    }    alert(pageX+pageY);  });

// 有時,我們需要通過鍵盤上的某些鍵來配合鼠標來觸發(fā)一些特殊的事件;// 這些鍵為:Shift/Ctrl/Alt和Meat(Window中是Windows鍵,蘋果機中是Cmd鍵);// 它們經常被用來修改鼠標事件和行為,所以叫修改鍵;        修改鍵屬性  屬性         說明   shiftKey      判斷是否按下了Shift鍵;  ctrlKey       判斷是否按下了ctrlKey鍵;  altKey       判斷是否按下了alt鍵;  metaKey       判斷是否按下了windows鍵,IE不支持;// 判斷按鍵函數;  function getKey(evt){    var e = evt || window.event;    var keys = [];    if(e.shiftKey) keys.push('shift');　　　　// 判斷是否同時按下了shift鍵;    if(e.ctrlKey) keys.push('ctrl');    if(e.altKey) keys.push('alt');    return keys;  }  document.onclick = function(evt){    alert(getKey(evt));　　　　　　　　　　　　 // 得到一個數組,可能包含shift/ctrl/alt的值;  }

 // 在發(fā)生keydown和keyup事件時,event對象的keyCode屬性中會包含一個代碼,與鍵盤上一個特定的鍵對應; // 對數字字母字符集,keyCode屬性的值與ASCII碼中對應小寫字母或數字的編碼相同;字母中大小寫不影響;   document.onkeydown = function(evt){     alert(evt.keyCode);   }

// Firefox/Chrome/Safari的event對象都支持一個charCode屬性;// 這個屬性只有在發(fā)生keypress事件時才會包含值,而這個值是按下的那個鍵所代表字符的ASII編碼;(也包含除數字和字母以外的按鍵);// 此時的keyCode通常等于0或者也可能等于所按鍵的編碼;// IE和Opear則是在keyCode中保存字符的ASCII編碼;  function getCharCode(evt){    var e = evt || window.event;    if(typeof e.charCode == 'number'){      return e.charCode;    }else{      return e.keyCode;    }  }  document.onkeypress = function(evt){    alert(getCharCode(evt));  }  // PS:可以使用String.fromCharCode()將ASCII編碼轉換成實際的字符;

// 兼容target和srcElement函數  function getTarget(evt){    var e = evt || window.event;    return e.target || e.srcElement;      // 兼容得到事件目標DOM對象;  }  document.onclick = function(evt){    var target = getTarget(evt);    alert(target);  }

// 現代瀏覽器都是冒泡類型;而捕獲模式是早期的Netscape默認情況;// 現在的瀏覽器要使用DOM2級模型的事件綁定機制才能手動定義事件流模式;  document.onclick = function(){    alert('我是document');  }  document.documentElement.onclick = function(){    alert('我是html');  }  document.body.onclick = function(){    alert('我是body');  }  document.getElementById('box').onclick = function(){    alert('我是div');  }  document.getElementsByTagName('input')[0].onclick=function(){    alert('我是input');  }  // PS:點擊input會逐級冒泡到document;

// 阻止事件冒泡兼容函數  function stopPro(evt){    var e = evt || window.event;    // 如果存在cancelBubble,則是IE瀏覽器,將其值設為true就可以阻止事件冒泡;    // 否則執(zhí)行W3C中的阻止事件冒泡方法stopPropagation();    window.event ? e.cancelBubble = true : e.stopPropagation();  }