千鋒扣丁學堂HTML5培訓之JS前端知識點整理總結(一)

HTML HTML5 瀏覽器 扣丁學堂 2019-06-30

今天千鋒扣丁學堂HTML5培訓老師給大家分享一篇關於JS前端知識點整理總結(一),介紹了JS前端知識點offset,scroll,client,冒泡,事件對象的應用,結合實例形式總結分析了offset,scroll,client,冒泡,事件對象相關功能、原理及操作注意事項,下面我們一起來一下吧。


千鋒扣丁學堂HTML5培訓之JS前端知識點整理總結(一)


關於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。

相關推薦

推薦中...