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>

function f(){

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

oDiv.onclick = function(){

alert("div");

}

</script>

</head>

</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");

}

點選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架構級别.

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

javascript進階程式設計 -- 讀書筆記（三）

繼續閱讀

IE8 CSS設定DIV居中，添加“margin:0 auto”

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

無元件上傳圖檔到資料庫中，最完整解決方案

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

GridView終極用法(一)

layui多任務上傳添加進度條