中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

2.210 變量的命名
這是個(gè)非常重要的東西，我不得不把這段話編號(hào)為 2.210 就是為了提醒剛?cè)腴T的菜鳥 － 用一個(gè)自己能明白的名字去命名你的變量。如果你要以此為生，最好也要讓你的變量名能被別人看懂。

2.211 綁定事件 － 回字的四種寫法
a) 直接在HTML元素標(biāo)記中寫入： onmousedown="divBlock_event_mousedown();"
b) 將事件函數(shù)的句柄賦值給相應(yīng)的事件：document.onmousemove=document_event_mousemove; （注意賦值的函數(shù)名后面并沒有括號(hào)）
c) 使用 attachEvent 方法（對(duì)于FF類的瀏覽器來說是 addEventListener）
ps：解除事件的綁定也有相應(yīng)方式，就不羅嗦了

2.212 不要被那個(gè) I_do_not_care=... 什么的迷惑，那個(gè)是三元表達(dá)式，如果你有認(rèn)真學(xué)習(xí) JS語法的話。那樣寫的目的是兼容。

2.213 在函數(shù)體的最前面就聲明需要用到的變量是個(gè)好習(xí)慣，它可以避免你犯很多莫名其妙的錯(cuò)誤 － 比如遞歸的死循環(huán)之類的。當(dāng)然，如果你壓根不喜歡這個(gè)變量（就像俺那個(gè) I_do_not_care 一樣），那么就隨它去吧。

2.214 e=window.event?window.event:e; 也是為了兼容。其實(shí)這句只是獲得 event 對(duì)象而已。用 e.clientX 而不用 e.x 也是兼容問題。obj.firstChild.nodeValue 而不是 obj.innerText 同理。<div>I am a div.</div>而不是 <div></div>也是同理。 － 兼容真是個(gè)tnnd 問題。

2.215 如果你發(fā)現(xiàn)自己還是有些糊涂，回去復(fù)習(xí) 0.1 和 0.2 節(jié)中提到的事件部分

2.22 拖動(dòng)方塊

運(yùn)行代碼框
<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="divBlock" onmousedown="divBlock_event_mousedown(arguments[0]);"></div> <script> function divBlock_event_mousedown(e){ var e, obj, temp; obj=document.getElementById("divBlock"); e=window.event?window.event:e; obj.startX=e.clientX-obj.offsetLeft; obj.startY=e.clientY-obj.offsetTop; document.onmousemove=document_event_mousemove; temp=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,""); } function document_event_mousemove(e){ var e, obj; obj=document.getElementById("divBlock"); e=window.event?window.event:e; with(obj.style){ position="absolute"; left=e.clientX-obj.startX+"px"; top=e.clientY-obj.startY+"px"; } } function document_event_mouseup(e){ var temp; document.onmousemove=""; temp=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,""); } </script>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

2.221 編程是件腦力活動(dòng)，呵呵。首先要先琢磨出來，拖動(dòng)意味著什么。其實(shí)拖動(dòng)就是判斷鼠標(biāo)位置，然后改變你需要拖動(dòng)的元素的坐標(biāo)而已。那么分成兩步：判斷鼠標(biāo)位置，改變?cè)�素的坐�?biāo)。這個(gè)看起來也不難。前一點(diǎn) 2.21 剛討論過。后一點(diǎn)，如果你對(duì) JS 操作 CSS 有所了解的話也是輕而易舉（不明白的回頭去看0.3節(jié)）。

2.222 現(xiàn)在俺詳細(xì)描述下這個(gè)過程：
a) 鼠標(biāo)按下時(shí)，判斷鼠標(biāo)的位置。將鼠標(biāo)坐標(biāo)和元素坐標(biāo)的差存在元素的 startX 和 startY 兩個(gè)自定義的屬性里。綁定鼠標(biāo)移動(dòng)事件。
b) 鼠標(biāo)移動(dòng)時(shí)，判斷鼠標(biāo)的位置。將鼠標(biāo)坐標(biāo)和 startX / startY 的差值作為新的元素坐標(biāo)。（你問我為啥這樣算？帥哥請(qǐng)回去重修高中數(shù)學(xué)，呵呵）
c) 鼠標(biāo)按鍵抬起，清除鼠標(biāo)移動(dòng)事件的相應(yīng)。（不然你放開了鼠標(biāo)方塊還是跟著你跑）

2.223 為啥用 document 的事件綁定而不是把事件綁定在 div上面？問的好（你不會(huì)沒想到這個(gè)問題吧？...）如果你試著將事件綁定在div上，你會(huì)發(fā)現(xiàn)隨著鼠標(biāo)的快速移動(dòng)，很容易把div給甩掉（不理解的同學(xué)請(qǐng)自己去動(dòng)動(dòng)手）。具體的為什么不多說了，點(diǎn)到即止，希望菜鳥多多思考。

2.224 不定義 position="absolute" 的話，left 和 top 是無效的 － 方塊不會(huì)動(dòng)的說

出處：藍(lán)色理想
責(zé)任編輯：blue

上一頁 網(wǎng)頁制作前臺(tái)之javascript [1] 下一頁 網(wǎng)頁制作前臺(tái)之javascript [3]

◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論