JS前端知識點offset，scroll，client，冒泡，事件對象的應(yīng)用整理總結(jié)
本文實例講述了JS前端知識點offset，scroll，client，冒泡，事件對象的應(yīng)用。分享給大家供大家參考，具體如下：
關(guān)于offset
多用于檢測盒子高度，寬度，位置等
- offsetWidth : 盒子的寬度， 包括(width, padding, border)
- offsetHeight: 盒子的高度， 包括(height, padding, border)
- offsetLeft: 返回自身距離帶有定位的上級盒子左邊的位置
- offsetTop: 返回自身距離帶有定位的上級盒子上邊的距離
- offsetParent: 返回自身帶有定位的父級對象
dom.style.left 與 dom.offsetLeft 的區(qū)別
- offsetLeft 返回的值是數(shù)字，style.left 返回的帶'px'
- offsetLeft 只讀， style.top 可讀寫
- offsetLeft 本身可以無定位, style.left 本身必須有定位屬性
關(guān)于scroll
- scrollTop : 盒子或頁面滾動距離頂部的距離
- scrollLeft : 盒子或頁面滾動距離左側(cè)的距離
- scrollTo : 盒子或頁面滾動到的位置，參數(shù)(x,y)
- onscroll : 使用onscroll 事件檢測window或者dom的滾動
頁面scrollTop的兼容寫法
var scrolltop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
關(guān)于client
- clientWidth: width + padding
- clientHeight
- scrollWidth: width + padding + (如果有溢出，包括溢出部分)
- scrollHeight: height + padding + (如果有溢出，包括溢出部分)
檢測屏幕可視區(qū)域?qū)挾鹊募嫒輰懛?/strong>
function getClientWidth() {
if(!window.innerWidth) {
return {
width: window.innerWidth,
height: window.innerHeight
}
} else if (document.compatMode === "CSS1Compat") {
// 標(biāo)準(zhǔn)模式下
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
// 怪異模式
return {
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
檢測電腦屏幕尺寸
- window.screen.width
- window.screen.height
事件的冒泡
冒泡順序演示
- IE 6.0 : div > body > html > document
- 其他瀏覽器：div > body > html > document > window
- 不存在冒泡的事件: blur, focus, load, unload
阻止冒泡
借助事件對象 evt
- 標(biāo)準(zhǔn)瀏覽器：evt.stopPropagation();
- IE: evt.cancelBubble = true;
通過事件對象獲取事件源對象示例
btn.onclick = function(event) {
var evt = window.event || event;
var target = evt.target ? evt.target : evt.srcElement;
console.log(target);
}
常用的 event 對象屬性
- pageX : 光標(biāo)相對于該網(wǎng)頁的水平位置 (非IE6,7,8屬性)
- pageY : 光標(biāo)相對于該網(wǎng)頁的垂直位置 (非IE6,7,8屬性)
- screenX : 光標(biāo)相對于該屏幕的水平位置
- screenY : 光標(biāo)相對于該屏幕的垂直位置
- clientX : 光標(biāo)相對于該網(wǎng)頁可見區(qū)域的水平位置
- clientY : 光標(biāo)相對于該網(wǎng)頁可見區(qū)域的垂直位置
- target : 該事件被傳送到的對象
- type : 事件的類型
event 對象兼容的寫法示例
document.onclick = function(event) {
var evt = event || window.event;
}
pageX 和 pageY的兼容性
pageX = evt.clientX + document.documentElement.scrollLeft; pageY = evt.clientY + document.documentElement.scrollTop;
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JS中實現(xiàn)簡單Formatter函數(shù)示例代碼
JS沒有提供方便使用的Formatter函數(shù)，用字符拼接的方式看起來混亂難讀，下面是JS簡單實現(xiàn)版本(沒有嚴(yán)格測試)2014-08-08
簽名板在網(wǎng)頁應(yīng)用中扮演著重要角色,它們能夠記錄用戶的手寫簽名或者繪圖,下面就跟隨小編一起來學(xué)習(xí)一下如何使用JavaScript實現(xiàn)簽名板功能2024-10-10
這篇文章主要為大家詳細介紹了BootStrap modal實現(xiàn)拖拽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
僅IE6/7/8中innerHTML返回值忽略英文空格的問題
僅IE6/7/8中innerHTML返回值忽略英文空格的問題，需要此問題的朋友可以參考下。2011-04-04
這篇文章主要介紹了JavaScript函數(shù)，函數(shù)是由事件驅(qū)動的或者當(dāng)它被調(diào)用時執(zhí)行的可重復(fù)使用的代碼塊，需要的朋友可以參考下2015-12-12
使用forEach和ES6實現(xiàn)tab切換的示例代碼
tab切換在很多菜單欄中都可以用到，本文主要介紹了使用forEach和ES6實現(xiàn)tab切換的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Bootstrap時間選擇器datetimepicker和daterangepicker使用實例解析
這篇文章主要為大家詳細解析了Bootstrap時間選擇器datetimepicker和daterangepicker使用實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
本文給大家介紹的是一篇國外網(wǎng)友寫的博客，講解的是關(guān)于實現(xiàn)復(fù)選框選中屬性的問題，感覺非常不錯，翻譯過來推薦給大家，希望小伙伴們能夠喜歡。2015-03-03
詳解JS事件循環(huán)及宏任務(wù)微任務(wù)的原理
在js中，我們一般將所有的任務(wù)都分成兩類，一種是同步任務(wù)，另外一種是異步任務(wù)。而在異步任務(wù)中，又有著更加細致的分類，那就是微任務(wù)和宏任務(wù)。本文將詳細講解這二者的原理與使用，需要的可以參考一下2022-05-05
使用element-ui的upload組件上傳代碼包時遇到的問題小結(jié)
這篇文章主要介紹了使用element-ui的upload組件上傳代碼包時遇到的問題及總結(jié),本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12