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

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

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

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

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

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

// 只有在主鼠標(biāo)按鈕被單擊時(shí)(一般是鼠標(biāo)左鍵)才會(huì)觸發(fā)click事件,因此檢測(cè)按鈕的信息并不是必要的;
// 但對(duì)于mousedown和mouseup事件來(lái)說(shuō),則在其event對(duì)象存在一個(gè)button屬性,表示按下或釋放按鈕;
  　　 非IE(W3C)中的button屬性
  值           說(shuō)明 
  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('按下了右鍵!');
    }
  }

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

// 判斷鼠標(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:在頁(yè)面沒(méi)有滾動(dòng)的情況下,pageX和pageY的值與clientX和clientY的值相等;
  // IE8以下不支持事件對(duì)象上的頁(yè)面坐標(biāo),不過(guò)使用客戶(hù)區(qū)坐標(biāo)和滾動(dòng)信息可以計(jì)算出來(lái);
  // 這時(shí)候需要用到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);
  });

// 有時(shí),我們需要通過(guò)鍵盤(pán)上的某些鍵來(lái)配合鼠標(biāo)來(lái)觸發(fā)一些特殊的事件;
// 這些鍵為:Shift/Ctrl/Alt和Meat(Window中是Windows鍵,蘋(píng)果機(jī)中是Cmd鍵);
// 它們經(jīng)常被用來(lái)修改鼠標(biāo)事件和行為,所以叫修改鍵;
        修改鍵屬性
  屬性         說(shuō)明 
  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');　　　　// 判斷是否同時(shí)按下了shift鍵;
    if(e.ctrlKey) keys.push('ctrl');
    if(e.altKey) keys.push('alt');
    return keys;
  }
  document.onclick = function(evt){
    alert(getKey(evt));　　　　　　　　　　　　 // 得到一個(gè)數(shù)組,可能包含shift/ctrl/alt的值;
  }

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

// Firefox/Chrome/Safari的event對(duì)象都支持一個(gè)charCode屬性;
// 這個(gè)屬性只有在發(fā)生keypress事件時(shí)才會(huì)包含值,而這個(gè)值是按下的那個(gè)鍵所代表字符的ASII編碼;(也包含除數(shù)字和字母以外的按鍵);
// 此時(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對(duì)象;
  }
  document.onclick = function(evt){
    var target = getTarget(evt);
    alert(target);
  }

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

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