// 事件處理函數(shù)的一個標(biāo)準(zhǔn)特性是:以某些方式訪問的事件對象包含有關(guān)于當(dāng)前事件的上下文信息;
// 事件處理由三部分組成:對象.事件處理函數(shù)=函數(shù);
  document.onclick = function(){
    alert('Lee');
  }
  // PS:以上程序解釋:click表示一個事件類型,單擊;
  // onclick:表示一個事件處理函數(shù)或綁定對象的屬性(或者叫事件監(jiān)聽器);
  // document:表示一個綁定的對象,用于觸發(fā)某個元素區(qū)域;
  // function():匿名函數(shù)是被執(zhí)行的函數(shù),用于觸發(fā)后執(zhí)行;

// 除了用匿名函數(shù)的方法作為被執(zhí)行的函數(shù),也可以設(shè)置成獨(dú)立的函數(shù);
  document.onclick = box;                // 直接賦值函數(shù)名即可,無須括號;
  function box(){
    alert('Lee');
  }

// this關(guān)鍵字和上下文
// 在 面向?qū)ο?那章我們了解到:在一個對象里,由于作用域的關(guān)系,this代表著離它最近的對象;
  var input = document.getElementsByTagName('input')[0];
  input.onclick = function(){
    alert(this.value);                // HTMLInputElement,this表示input對象;
  }

// 當(dāng)觸發(fā)某個事件時,會產(chǎn)生一個事件對象,這個對象包含著所有與事件有關(guān)的信息;
// 包括導(dǎo)致事件的元素/事件的類型/以及其它與特定事件相關(guān)的信息;
// 事件對象,我們一般稱作為event對象,這個對象是瀏覽器通過函數(shù)把這個對象作為參數(shù)傳遞過來的;
// 首先,我們必須驗(yàn)證一下,在執(zhí)行函數(shù)中有沒有傳遞參數(shù),是否可以得到隱藏的參數(shù);
  function box(){                   // 普通空參函數(shù);
    alert(arguments.length);            // 0;沒有得到任何傳遞的參數(shù);
  }
  input.onclick = function(){             // 事件綁定的執(zhí)行函數(shù);
    alert(arguments.length);            // 1;得到一個隱藏參數(shù);
  }
  // PS:通過上面兩組函數(shù),我們發(fā)現(xiàn),通過事件綁定的執(zhí)行函數(shù)是可以得到一個隱藏參數(shù)的;
  // 說明,瀏覽器會自動分配一個參數(shù),這個參數(shù)其實(shí)就是event對象;
  input.onclick = function(){
    alert(arguments[0]);              // MouseEvent,鼠標(biāo)事件對象;
  }

  // 上面這種做法比較麻煩,那么比較簡單的做法是,直接通過接收參數(shù)來得到即可;
  input.onclick = function(evt){           // 接受event對象,
    alert(evt);                  // MouseEvent,鼠標(biāo)事件對象;
  }

  // 直接接收event對象,是W3C的做法,IE不支持,IE自己定義了一個event對象,直接在window.event獲取即可;
  input.onclick = function(evt){
    var e = evt || window.event;
    alert(e);                   // 實(shí)現(xiàn)跨瀏覽器兼容獲取event對象;
  }

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

// 事件對象提供了兩組來獲取瀏覽器坐標(biāo)的屬性:
// 一組是頁面可視區(qū)坐標(biāo);
// 一組是屏幕坐標(biāo);
    坐標(biāo)屬性
  屬性       說明
  clientX     可視區(qū)X坐標(biāo),距離左邊框的距離;
  clientY     可視區(qū)Y坐標(biāo),距離上邊框的距離;
  screenX     屏幕區(qū)X坐標(biāo),距離左屏幕的距離;
  screenY     屏幕區(qū)Y坐標(biāo),距離上屏幕的距離;
  pageX      頁面中X坐標(biāo),距離整個頁面左邊框的距離;
  pageY      頁面中Y坐標(biāo),距離整個頁面上邊框的距離;

// 判斷鼠標(biāo)點(diǎn)擊位置函數(shù);
  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以下不支持事件對象上的頁面坐標(biāo),不過使用客戶區(qū)坐標(biāo)和滾動信息可以計(jì)算出來;
  // 這時候需要用到document.body(混雜模式)或document.documentElement(標(biāo)準(zhǔn)模式)中的scrollTop和scrollLeft屬性;
  // pageX和pageY兼容函數(shù);
  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);
  });

// 有時,我們需要通過鍵盤上的某些鍵來配合鼠標(biāo)來觸發(fā)一些特殊的事件;
// 這些鍵為:Shift/Ctrl/Alt和Meat(Window中是Windows鍵,蘋果機(jī)中是Cmd鍵);
// 它們經(jīng)常被用來修改鼠標(biāo)事件和行為,所以叫修改鍵;
        修改鍵屬性
  屬性         說明 
  shiftKey      判斷是否按下了Shift鍵;
  ctrlKey       判斷是否按下了ctrlKey鍵;
  altKey       判斷是否按下了alt鍵;
  metaKey       判斷是否按下了windows鍵,IE不支持;

// 判斷按鍵函數(shù);
  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));　　　　　　　　　　　　 // 得到一個數(shù)組,可能包含shift/ctrl/alt的值;
  }

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

// Firefox/Chrome/Safari的event對象都支持一個charCode屬性;
// 這個屬性只有在發(fā)生keypress事件時才會包含值,而這個值是按下的那個鍵所代表字符的ASII編碼;(也包含除數(shù)字和字母以外的按鍵);
// 此時的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編碼轉(zhuǎn)換成實(shí)際的字符;

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

// 現(xiàn)代瀏覽器都是冒泡類型;而捕獲模式是早期的Netscape默認(rèn)情況;
// 現(xiàn)在的瀏覽器要使用DOM2級模型的事件綁定機(jī)制才能手動定義事件流模式;
  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:點(diǎn)擊input會逐級冒泡到document;

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