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架構級别.
如果有什麼問題希望大家指出來,畢竟學習是個互動分享的過程,自己悶頭悶腦學習也不會學出什麼名堂的.. :)