2016年4月25日案例筆記課堂_第1頁
2016年4月25日案例筆記課堂_第2頁
2016年4月25日案例筆記課堂_第3頁
2016年4月25日案例筆記課堂_第4頁
2016年4月25日案例筆記課堂_第5頁
免費預覽已結束，剩余10頁可下載查看

付費下載

VIP免費下載

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、愛前端 - 專業(yè)前端開發(fā)培訓JavaScript 進階第 2 天課堂筆記（本課程共 6 天）班級：北京前端1 期講師：日期：2016 年 4 月 25 日第 1 頁 共 15頁愛前端 - 專業(yè)前端開發(fā)培訓：: shaoshanhuan愛前端官網(wǎng)：第 2 頁 共頁15愛前端 - 專業(yè)前端開發(fā)培訓目錄JavaScript 進階1目錄3一、對象41.1對象是什么41.2 IE6、7、8 的兼容問題4二、各種值72.1鼠標位置 event.clientX、event.screenX72.2得到盒子在頁面內的凈位置92.3頁面的卷動值102.4在盒子內的位置10三、窗口卷動12第 3 頁 共 15頁愛前

2、端 - 專業(yè)前端開發(fā)培訓一、對象1.1我們可以把對象是什么的處理函數(shù)，當做一個回調函數(shù)。click發(fā)生的時候，才調用這個 function()瀏覽器在調用這個處理函數(shù)，調用的時候還傳進去一個實際參數(shù)，這個參數(shù)是一個對象，表示這次點擊事件的所有細節(jié)。比如按的什么按鈕、點擊的位置等等。所以，我們的處理函數(shù)，就要通過一個形式參數(shù)來接收。比如，獲得鼠標當前的位置：event.clientX 表示觸發(fā)的時候，鼠標的 x 位置（相對于視口）不同的，就有不同的 event 值?？梢韵胂蟮芥I盤，沒有鼠標的位置。而是有 event.keyCode 按下去的鍵盤碼的值。1.2 IE6、7、8 的兼容問題超級兼容大

3、坑：在調用處理函數(shù)的時候，高級瀏覽器是傳給這個處理函數(shù)一個實際參數(shù) event 對象。但是 IE6、7、8 是給 window 對象綁定一個當前的 event 屬性。IE 中：第 4 頁 共 15頁1 document.onmousemove = function()2 h1.innerHTML = "當前鼠標坐標為" + window.event.clientX + "," + window.event.clientY;1 document.onmousemove = function(event)2 h1.innerHTML = "當前鼠標

4、坐標為" + event.clientX + "," + event.clientY;31oDiv.onclick = function(event)231oDiv.onclick = function()23愛前端 - 專業(yè)前端開發(fā)培訓所以現(xiàn)在就有一個兼容性的處理的小竅門：| 就是或邏輯短路運算符，如果 event 有定義，那么就 event 對象；否則就是 window.event 對象。第 5 頁 共 15頁1 /在頁面上鼠標移動的時候，觸發(fā)2 document.onmousemove = function(event)3 event = event | w

5、indow.event;4 h1.innerHTML = "當前鼠標坐標為" + event.clientX + "," + event.clientY;53愛前端 - 專業(yè)前端開發(fā)培訓IE 中有很多方法的名字和高級瀏覽器不一樣，比如昨天說的默認：在 IE 中是一個屬性：這些的兼容性問題，就用能力檢測來解決：包括 preventDefault()方法在 IE6、7、8 中不支持在內，我們要記住這三個：event.target 兼容解決，就是用一個短路語法：第 6 頁 共 15頁1var targetElem = event.target | event.

6、srcElement;event.preventDefault()不兼容！ 在 IE6、7、8 中用 event.returnValue=false; 代替event.stopPropagation()不兼容！在 IE6、7、8 中用 event.cancelBubble=true; 代替event.target 不兼容，在 IE6、7、8 中用 event.srcElement 代替1 /默認的滾動，的方法有瀏覽器兼容問題：2 if(event.preventDefault)3 event.preventDefault();4 else5 event.returnValue = false;

7、61event.returnValue = false;1event.preventDefault();愛前端 - 專業(yè)前端開發(fā)培訓二、各種值2.1 鼠標位置 event.clientX、event.screenX下面 4 個值是全線兼容的：這四個值都沒有。拖拽的算法：第 7 頁 共 15頁clientX 表示鼠標距離視口左邊 x 值screenX 表示鼠標距離整個屏幕左邊 x 值1 event.clientX2 event.clientY3 event.screenX4 event.screenY愛前端 - 專業(yè)前端開發(fā)培訓第 8 頁 共頁15愛前端 - 專業(yè)前端開發(fā)培訓2.2 得到盒子在頁

8、面內的凈位置我們之前學習過 oDiv.offsetTop 指的是這個盒子的 border 外層到條 border），至于 offsetParent 是誰，IE6、7 有不同的理解。的 offsetParent 的border 內側（IE8 多算了一我們現(xiàn)在說的，是 oDiv 這個元素在頁面中的凈位置，起一個名字 allTop。得到 allTop 不難，迭代，一層一層的累加 offsetTop 值。第 9 頁頁共 151 /返回這個元素在頁面中的凈位置2 /就是這個元素所有 offsetParent 的 offsetTop 值的和3 function glTop(obj)4 /累加器，累加器的初

9、始值不是 0，而是現(xiàn)在 offsetTop 值5 /一會兒 while 語句直接從它爸開始了6 var allTop = obj.offsetTop;7 /當前正在算高度的元素8 var currentObj = obj;9 while(currentObj = currentObj.offsetParent)10 allTop += currentObj.offsetTop;1112return allTop;13愛前端 - 專業(yè)前端開發(fā)培訓2.3 頁面的卷動值頁面被滾動條卷動走的量窗口的卷動onscroll，無論因為什么（比如鼠標拖拽滾動條、鼠標滾輪、鍵盤 pagedown、鍵盤下箭頭）導

10、致了頁面的卷動，觸發(fā)這個。高級瀏覽器認為 scrollTop 是 body 元素的屬性。而 IE6、7、8 堅決認為是<html>的屬性。所以，我們要這么寫：document.documentElement 就是<html>事實上，很多東西都有這個區(qū)分，比如瀏覽器窗口的寬度。2.4 在盒子內的位置表示鼠標在盒子的位置，火狐不兼容，但是我們發(fā)現(xiàn)現(xiàn)在的火狐嗷嗷兼容。第 10 頁 共 15頁event.offsetXevent.offsetY1document.body.scrollTop | document.documentElement.scrollTop;1 /當窗口

11、卷動的時候發(fā)生這個2 window.onscroll = function()34愛前端 - 專業(yè)前端開發(fā)培訓要想全線兼容，必須進行周轉：應該用 event.clientY 和glLeft(smallPic)和頁面的 scrollTop 值進行減法比較。第 11 頁 共 15頁var x = event.clientX - (glLeft(smallPic) - scrollLeft) var y = event.clientY - (glLeft(smallPic) - scrollTop)愛前端 - 專業(yè)前端開發(fā)培訓三、窗口卷動窗口卷動的時候觸發(fā)的：卷動值：卷動值不是可讀的，也可以設置。甚

12、至是動畫。oDiv.offsetLeftoDiv.offsetTopoDiv.clientWidth/width+paddingoDiv.clientHeightoDiv.offsetWidth/width+padding+borderoDiv.offsetHeightevent 對象的鼠標當前位置/鼠標到視口event.clientXevent.clientY/鼠標到屏幕event.screenXevent.screenY/說是不兼容火狐，但現(xiàn)在火狐兼容，到最小盒子的左上角event.offsetXevent.offsetY第 12 頁 共 15頁窗口的元素的、位置：1document.body.scrollTop | document.documentElement.scrollTop1window.onscroll = function()2愛前端 - 專業(yè)前端開發(fā)培訓/卷動值document.body.scrollTo

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論