今天千鋒扣丁學堂HTML5培訓老師給大家分享一篇關於JS前端知識點整理總結(一),介紹了JS前端知識點offset,scroll,client,冒泡,事件對象的應用,結合實例形式總結分析了offset,scroll,client,冒泡,事件對象相關功能、原理及操作注意事項,下面我們一起來一下吧。
關於offset
多用於檢測盒子高度,寬度,位置等
-offsetWidth:盒子的寬度,包括(width,padding,border)
-offsetHeight:盒子的高度,包括(height,padding,border)
-offsetLeft:返回自身距離帶有定位的上級盒子左邊的位置
-offsetTop:返回自身距離帶有定位的上級盒子上邊的距離
-offsetParent:返回自身帶有定位的父級對象
dom.style.left與dom.offsetLeft的區別
offsetLeft返回的值是數字,style.left返回的帶'px'
offsetLeft只讀,style.top可讀寫
offsetLeft本身可以無定位,style.left本身必須有定位屬性
關於scroll
scrollTop:盒子或頁面滾動距離頂部的距離
scrollLeft:盒子或頁面滾動距離左側的距離
scrollTo:盒子或頁面滾動到的位置,參數(x,y)
onscroll:使用onscroll事件檢測window或者dom的滾動
頁面scrollTop的兼容寫法
var scrolltop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
關於client
clientWidth:width+padding
clientHeight
scrollWidth:width+padding+(如果有溢出,包括溢出部分)
scrollHeight:height+padding+(如果有溢出,包括溢出部分)
檢測屏幕可視區域寬度的兼容寫法
function getClientWidth() {
if(!window.innerWidth) {
return {
width: window.innerWidth,
height: window.innerHeight
}
} else if (document.compatMode === "CSS1Compat") {
// 標準模式下
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
// 怪異模式
return {
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
檢測電腦屏幕尺寸
window.screen.width
window.screen.height
事件的冒泡
冒泡順序演示
IE6.0:div>body>html>document
其他瀏覽器:div>body>html>document>window
不存在冒泡的事件:blur,focus,load,unload
阻止冒泡
藉助事件對象evt
標準瀏覽器: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:光標相對於該網頁的水平位置(非IE6,7,8屬性)
pageY:光標相對於該網頁的垂直位置(非IE6,7,8屬性)
screenX:光標相對於該屏幕的水平位置
screenY:光標相對於該屏幕的垂直位置
clientX:光標相對於該網頁可見區域的水平位置
clientY:光標相對於該網頁可見區域的垂直位置
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;
以上就是關於千鋒扣丁學堂HTML5培訓之JS前端知識點整理總結(一)的全部內容,希望對大家的學習有所幫助,想要了解更多關於HTML5開發方面內容的小夥伴,請關注扣丁學堂HTML5培訓官網、微信等平臺,扣丁學堂IT職業在線學習教育有專業的HTML5講師為您指導,此外扣丁學堂老師精心推出的HTML5視頻教程定能讓你快速掌握HTML5從入門到精通開發實戰技能。扣丁學堂H5技術交流群:673883249。