天天看點

javascript進階程式設計 -- 讀書筆記(三)

javascript進階程式設計 -- 讀書筆記(1)  :

http://blog.csdn.net/thc1987/archive/2011/05/13/6417361.aspx

javascript進階程式設計 -- 讀書筆記(2)  :

http://blog.csdn.net/thc1987/archive/2011/05/13/6417367.aspx

-------------------------------------

事件

<html>

  <head>

 <script type="text/javascript">

  function f(){

   var oDiv = document.getElementById("d");

   oDiv.onclick = function(){

   alert("div");

   }

  }

 </script>

  </head>

  <body οnlοad="f()">

    <div id="d">div1</div>

    <div id="d2" οnclick="alert('div2')">div2</div>

  </body>

</html>

以上兩種方法功能相同

------------

IE中的attachEvent()和detachEvent()方法.

[Object].attachEvent("nameOfEventHander",fn);

[Object].detachEvent("nameOfEventHander",fn);

attachEvent()函數被作為事件處理函數添加

detachEvent()在事件處理函數清單中查找指定的函數,并移除

 function f2(){

   var oDiv = document.getElementById("d");

   oDiv.attachEvent("onclick",fn);

   oDiv.attachEvent("onclick",fn2);

  }

  var fn = function(){

   alert("attachEvent");

  }

  var fn2 = function(){

   alert("attachEvent2");

  }

<div id="d">div1</div>

點選div1,先彈出attachEvent2再彈出attachEvent

如果改為:

function f3(){

   var oDiv = document.getElementById("d");

   oDiv.onclick = fn;

   oDiv.attachEvent("onclick",fn2);

  }

則先attachEvent再attachEvent2

-------------------

DOM方法addEventListener()和removeEventListener()用來配置設定和移除事件處理函數

這些方法有三個參數:事件名稱,要配置設定的函數和處理函數是否用于冒泡階段還是捕獲階段.

true為捕獲階段,反之冒泡階段

[Object]addEventListener("name_of_event",fn,bCapture);

[Object]removeEventListener("name_of_event",fn,bCapture);

function f4(){

   var oDiv = document.getElementById("d");

   oDiv.addEventListener("click",fn,false);

   oDiv.addEventListener("click",fn2,false);

  }

如果在add的時候第三個參數為false,則remove的時候第三個參數同樣為false

-------------------

定位:

IE中,事件對象是window對象的一個屬性event

oDiv.onclick = function(){

 var oEvent = window.event;

}

DOM标準:對象必須作為唯一的參數傳給事件處理函數

oDiv.onclick = function(){

 var oEvent = arguments[0];

}

oDiv.onclick = function(oEvent){

}

IE和DOM的相似性:

1. 擷取事件類型

var sType = oEvent.type;

function f(oEvent){

      if(oEvent.type=="click"){

       alert("clicked");

      }else if(oEvent.type == "mouseover"){

       alert("mouseovered");

      }

     }

     function load(){

      var oDiv = document.getElementById("d");

      oDiv.onclick = f;

      oDiv.onmouseover = f;

     }

2. 擷取按鍵代碼(keydown/keyup)

var iKeyCode = oEvent.keyCode;

3. 檢測Shift,Alt,Ctrl,傳回boolean類型

var bShift = oEvent.shiftKey;

var bAlt = oEvent.altKey;

var bCtrl = oEvent.ctrlKey;

4. 擷取用戶端坐标

var iClientX = oEvent.clientX;

var iClientY = oEvnet.clientY;

5. 擷取螢幕坐标

var iScreenX = oEvent.screentX;

var iScreenY = oEvent.screentY;

兩個屬性表示傳回離使用者螢幕邊界有多少個像素的整數

---------------

差別:

IE和DOM的差別

1. 擷取目标:

假設<div>元素配置設定onclick事件處理函數,觸發click時,<div>就被認為是目标

IE中,目标包含在event對象的srcElement屬性中

var oTarget = oEvent.srcElement;

DOM相容的浏覽器,目标包含在target中

var oTarget = oEvent.target

2. 擷取字元代碼

如果按鍵代表一個字元,IE的keyCode将傳回字元的代碼(等于它的Unicode值)

var iCharCode = oEvent.keyCode;

DOM中按鍵的代碼和字元會有一個分離,使用charCode屬性

var iCharCode = oEvent.charCode;

然後用這個值來擷取實際的字元,

var sChar = String.fromCharCode(iCharCode);

如果不确定按下的鍵是否包含字元,可以使用isChar來進行判斷

if(oEvent.isChar){

 var iCharCode = oEvent.charCode;

}

3. 阻止某個時間的預設行為

IE中要阻止事件的預設行為,将returnValue屬性設定為false;

oEvent.returnValue = false;

在Mozilla中

oEvent.preventDefault();

禁止右鍵:

document.body.oncontextmenu = function(oEvent){

 if(isIE){

  oEvent = window.event;

  oEvent.returnValue = false;

 }else{

  oEvent.preventDefault();

 }

}

4. 停止事件複制(冒泡)

IE中,要阻止進一步冒泡

oEvent.cancelBubble = true;

mozilla中

oEvent.stopPropagation();

===========================

事件類型:

 滑鼠事件:使用滑鼠時觸發的事件

 鍵盤事件:使用鍵盤時觸發的事件

 HTML事件:視窗發生變動或者發生特定的用戶端-服務端互動時觸發

 突變事件:底層的DOM結構發生改變時觸發

--------------

滑鼠事件:

 click: 點選滑鼠左鍵時發生(右鍵不發生).當焦點在按鈕上,并按了回車同樣會發生.

 dblclick: 輕按兩下滑鼠時發生(右鍵不發生)

 mousedown: 點選任意一個滑鼠按鈕時發生

 mouseout: 滑鼠指針在某個元素上,且使用者正要将其移出元素的邊界時發生

 mouseover: 滑鼠移出某個元素,到另一個元素上時發生

 mouseup: 松開任意一個按鈕時發生

 mousemove: 滑鼠在某個元素上持續發生

1. 滑鼠事件的屬性:

 坐标屬性: 如clientX clientY等

 type

 target(DOM)或srcElement

 shiftKey,ctrlKey,altKey,metaKey(DOM)

 button(隻有在mousedown,mouseover,mouseout,mousemove,mouseup事件中)

對于mouseover,mouseout事件還有額外事件.

在IE中fromElement屬性包含滑鼠指針來自的元素,toElement包含滑鼠指針指去的元素

對于mouseover事件,toElement總是等于srcElement

對于mouseout事件,fromElement總是等于srcElement

在DOM中的mouseover事件中,relatedTarget指出指針來自何處

在DOM中的mouseout事件中,relatedTarget指出滑鼠指針去往何方

2. 順序:

在同一個目标上順序如下:

 (1)mousedown

 (2)mouseup

 (3)click

 (4)mousedown

 (5)mouseup

 (6)click

 (7)dblclick

-----------------------

鍵盤事件:

 keydown: 按下某個鍵時發生. 一直按着會不斷觸發(opera浏覽器除外)

 keypress: 按下一個鍵,并産生一個字元時發生.一直按下會持續發生

 keyup:釋放按鍵時發生

屬性:

 keyCode

 charCode(DOM)

 target(DOM)或srcElement(IE)

 shiftKey,ctrlKey,altKey,metaKey(DOM)

順序:

使用者按一次字元按鍵時順序:

 (1)keydown

 (2)keypress

 (3)keyup

使用者按一次非字元按鍵(如shift)時順序:

 (1)keydown

 (2)keyup

-----------------------

HTML事件:

 load事件: 頁面完全載入後,在window對象上觸發,所有的架構都載入後,在架構集上觸發;

     <img />完全載入後,在其上觸發;或者對于<object />元素,其完全加載,在其上觸發;

 unload事件: 頁面完全解除安裝後,在window對象上觸發;所有的架構都解除安裝後,在架構集上觸發;

    或者對于<object/>完全解除安裝在其上觸發

 abort事件: 使用者停止下載下傳過程時,如果<object/>對象還未完全載入,就在其上觸發;

 error事件:JavaScript腳本出錯在window對象上觸發;某個<img/>指定圖像無法載入時,在其上觸發;

     或<object/>對象元素無法載入時觸發;或架構集中的一個或多個無法載入時觸發;

 select事件: 使用者選擇文本框中的一個或多個字元時觸發.

 change事件: 文本框失去焦點并且在它擷取焦點後内容發生過改變時觸發;某個<select/>元素的值發生改變時觸發;

 submit事件: 點選送出按鈕,在<form>上觸發

 reset事件: 點選重置按鈕,在<form>上觸發

 resize事件:視窗或架構大小發生改變時觸發

 scroll事件: 任何滾動條的元素上卷動它時觸發

 focus事件: 任何元素或者視窗本身擷取焦點時觸發

 blur事件: 任何元素或者視窗本身失去焦點時觸發

-----------------------

變化事件:

是DOM标準的一部分,但目前沒有任何主流的浏覽器實作了它.

 DOMSubtreeModified: 文檔或者元素的子樹因為添加或删除節點而改變時觸發

 DOMNodeInserted: 當一個節點作為另一個節點的子節點插入時觸發

 DOMNodeRemoved: 當一個節點作為另一個節點的子節點被删除時觸發

 DOMNodeRemovedFromDocument: 當一個節點從文檔中删除時觸發

 DOMNodeInsertedIntoDocument: 當一個節點插入到文檔中時觸發

=======================

跨平台事件:

IE中的事件跟DOM中的事件有好多地方不一樣,

我們要做的就是把事件對象揉合成一個通用的對象.

可以寫個類

var EventUtil = {

 addEventHandler : function(oTarget,sEventType,fn){

  if(oTarget.addEventListener){

   oTarget.addEventListener(sEventType,fn,false);

  }else if(oTarget.attachEvent){

   oTarget.attachEvent("on" + sEventType,fn);

  }else{

   oTarget["on" + sEventType] = fn;

  }

 }

 ,removeEventHandler : function(oTarget,sEventType,fn){

  if(oTarget.removeEventListener){

   oTarget.removeEventListener(sEventType,oTarget,false);

  }else if(oTarget.detachEvent){

   oTarget.detachEvent("on"+sEventType,fn);

  }else {

   oTarget["on"+sEventType] = null;

  }

 }

 ,formatEvnet : function(oEvent){

  if(isIE()){

   oEvent.charCode = (oEvent.type == "keypress")?oEvent.charCode:0;

   oEvent.eventPhase = 2;

   oEvent.isChar = (oEvent.charCode > 0);

   oEvent.pageX = oEvent.clientX + document.body.scrollLeft;

   oEvent.pageY = oEvent.clientY + document.body.scrollTop;

   // 阻止某個事件的預設行為

   oEvent.preventDefault = function(){

    this.returnValue = false;

   }

   if(oEvent.type == "mouseout"){

    oEvent.relateTarget = oEvent.toElement;

   } else if(oEvent.type == "mouseover"){

    oEvent.relateTarget = oEvent.fromElement;

   }

   // 阻止冒泡

   oEvent.stopPropagation = function(){

    this.cancelBubble = true;

   }

   oEvent.target = oEvent.srcElement;

   oEvent.timestamp = (new Date()).getTime();

  }

  return oEvent;

 }

 ,getEvent : function(){

  if(window.event){

   return this.formatEvnet(window.event);

  }else {

   return EventUtil.getEvent.caller.arguments[0];

  }

 }

}

caller:

每個函數都有一個caller屬性,它包含了指向調用它的方法的引用.

例如:funcA()調用了funB(),那麼funB.caller就等于funA.

function funA(){

  funA.name = "jack";

  funB();

 }

 function funB(){

  var whoCallMe = funB.caller;

  alert(funA.name); // jack

 }

 function callerTest(){

  funA();

 }

BTW: 我是一名java開發者,J2EE方向,個人感覺學好javascript真的很有必要,因為前端頁面少不了會用到js

有時候甚至會達到事半功倍的效果. 我一開始進入公司不怎麼會js隻會簡單的文法什麼的...發現在工作中遇到了許多問題.

影響了工作進度,是以下狠心好好學習了一下,基本把知識點過了下,想必這些知識運用在開發中已經足夠了.如果不是做複雜的js架構級别.

如果有什麼問題希望大家指出來,畢竟學習是個互動分享的過程,自己悶頭悶腦學習也不會學出什麼名堂的.. :)

繼續閱讀