offset
offsetWidth,offsetHeight:沒有單位很魂，數(shù)值類型，檢測盒子的寬高，包括padding和border绽乔，不包含margin
offsetWidth = padding + border + width
offsetHeight = padding + border + height
offsetTop,offsetLeft:檢測在父盒子中距離最近的帶有定位的盒子的左上的距離补疑，如果父級盒子都沒有定位歧沪，那么以body為準，從父親的padding開始算莲组，不包括父親的border诊胞，包含父親的padding，也包含自己的margin锹杈，但是不包含自己的padding和border,沒有單位撵孤，數(shù)值類型
offsetTop = top + father.padding + margin
offsetLeft = left + father.padding + margin
style.top不一定等于offsetTop
scroll
scrollWidth,scrollHeight:不包括margin,當里面的內(nèi)容沒有超過盒子時，代表的是盒子的寬高竭望，當內(nèi)容超過盒子時邪码，代表內(nèi)容的寬高
scrollWidth = width + padding
scrollHeight = height + padding
scrollTop,scrollLeft:網(wǎng)頁被卷去的左上,都是body調(diào)用
window.onscroll = function () {
document.title = document.body.scrollTop;
//沒有dtd約束的
document.title = document.body.scrollTop;
//有dtd約束的
document.title = document.documentElement.scrollTop;
//兼容寫法
document.title = document.body.scrollTop || document.documentElement.scrollTop;
document.title = document.body.scrollTop + document.documentElement.scrollTop;
document.title = window.pageYOffset;
alert(window.pageYOffset);
document.title = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
}
client
clientHeight,clientWidth:包含padding但是不包含border和margin
clientHeight = padding + height
clientWidth = padding + width
clientTop,clientLeft:代表border
clientTop = borderTop
clientLeft = borderLeft
動畫
勻速動畫
function animat(target) {
//要用定時器先清除定時器
clearInterval(time);
//速度固定
var speed = target >= box.offsetLeft ? 10: -10;
time = setInterval(function () {
//在執(zhí)行之前就獲取當前值和目標值之差
var val = target - box.offsetLeft;
box.style.left = box.offsetLeft + speed + "px";
//目標值和當前值只差如果小于步長，那么就不能在前進了
//因為步長有正有負咬清，所有轉(zhuǎn)換成絕對值來比較
if(Math.abs(val)<Math.abs(speed)){
box.style.left = target + "px";
clearInterval(time);
},30);
}
緩動動畫
function animat(box,target) {
clearInterval(box.time);
box.time = setInterval(function () {
var speed = - (box.offsetLeft - target) / 10;
//對步長進行二次加工(大于0向上取整,小于0項下取整)
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
box.style.left = box.offsetLeft + speed + "px";
if(speed === 0){
//處理小數(shù)賦值
box.style.left = target + "px";
clearInterval(box.time);
}
},30);
}
/**
* 緩動動畫終極版
* @param ele 元素
* @param json "屬性"：值
* @param fn 回調(diào)函數(shù)
*/
function animate(ele,json,fn) {
clearInterval(ele.time);
ele.time = setInterval(function () {
//清除定時器的標志
var bool = true;
//遍歷json
for (var key in json) {
var leader = parseInt(getStyle(ele, key)) || 0;
var speed = (json[key] - leader) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
leader = leader + speed;
ele.style[key] = leader + speed + "px";
if (json[key] !== leader) {
bool = false;
}
}
//定時器每次執(zhí)行的時候都會把bool賦值成true闭专，經(jīng)過循環(huán)所有的屬性的動畫都結(jié)束了。speed都是0旧烧，bool出來就還是true
if (bool) {
clearInterval(ele.time);
if(fn){
fn();
}
}
},25);
}
//兼容方法獲取元素樣式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
event對象
事件對象獲取
document.onclick = function (event) {
//兼容寫法
event || window.event;
}
非重點屬性
console.log(event.timeStamp);//頁面刷新時間到點擊時的時間差影钉，毫秒
console.log(event.type);//事件類型，click點擊事件
console.log(event.target);//該事件被傳送到的對象,也就是觸發(fā)事件的對象
console.log(event.button);//當事件被觸發(fā)時掘剪，返回那個鼠標按鈕被點擊
console.log(event.bubbles); //獲取事件是否觸發(fā)冒泡
重點屬性:取決于先去坐標系不同斧拍，相對于坐標系，鼠標的位置
console.log(event.pageY);//body(頁面)為坐標系
console.log(event.clientY);//當前可視區(qū)域(瀏覽器)為坐標系
console.log(event.screenY);//以屏幕為坐標系,基本不用
冒泡
類似響應(yīng)者鏈,但是事件不會找到最適的觸發(fā)杖小，而是都會觸發(fā)
Snip20170605_3.png
//當點擊自盒子時候肆汹，父盒子也會觸發(fā)
var box1 = document.getElementsByClassName("box1")[0];
var box2 = document.getElementsByClassName("box2")[0];
var box3 = document.getElementsByClassName("box3")[0];
box1.onclick = function () {
console.log("點了box1");
}
box2.onclick = function () {
console.log("點了box2");
}
box3.onclick = function () {
console.log("點了box3");
}
document.body.onclick = function () {
console.log("點擊了body");
}
捕獲從上往下 body->...div
冒泡從下往上 div->...body
addEventListener第三個參數(shù)true是捕獲愚墓，false是冒泡
box1.addEventListener("click", function () {
console.log("點了box1");
},true);
box2.addEventListener("click", function () {
console.log("點了box2");
},true);
box3.addEventListener("click", function () {
console.log("點了box3");
},true);
document.addEventListener("click", function () {
console.log("點了document");
},true);
避免冒泡
onBlur 、focus昂勉、onload浪册、 onunload、onmouseenter岗照、onmouseleave不會觸發(fā)冒泡
//阻止冒泡
box1.onclick = function (event) {
//這種方法取消冒泡的機制是到box1這個層級時阻斷冒泡繼續(xù)傳遞村象，不會傳到body了。但是之前的box2攒至，box3冒泡還是有,
//冒泡的時候類似響應(yīng)者鏈的傳遞厚者，到這層被阻止了。
event = event || window.event;
if (event && event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
console.log("點了box1");
}
box2.onclick = function () {
console.log("點了box2");
}
box3.onclick = function () {
console.log("點了box3");
}
document.body.onclick = function () {
console.log("點擊了body");
}
