JavaScript 系列博客（六）

JavaScript 系列博客（六）

前言

本篇博客介紹 js 操做高級，經過 js 獲取標籤的全局屬性、設置標籤的全局屬性，以及事件的綁定與取消、js 盒模型與 js 動畫。

對象使用的高級

• 對象的key爲字符串類型, value爲任意類型

var obj = {
    name: "name",
    "person-age": 18
}
// 訪問
obj.name | obj["name"]
obj["person-age"]

• 對象的屬性能夠任意添加與刪除

var obj = {
   	name: "obj"
}
// 刪除
delete obj.name
// 添加
obj.age = 18  // 若是age的key已存在就是修改值, 不存在就是添加鍵值對, 添加的key任意
// 注: 獲取的頁面元素(標籤對象)也能夠任意添加/刪除屬性

頁面標籤全局屬性操做

ele.getAttribute("alert");
// 獲取頁面標籤ele的alert全局屬性的值, 若是沒有該全局屬性值爲null

ele.setAttribute("attr_key", "attr_value");
// 頁面標籤ele已有該全局屬性,就是修改值, 沒有就是添加該全局屬性並賦相應值
// 注: 通常應用場景, 結合css的屬性選擇器完成樣式修改

事件

• 事件的綁定

// 第一種
box.onclick = function(){}
// 只能綁定一個實現體, 若是有屢次綁定, 保留最後一次
// box.onclick = null來取消事件的綁定

// 第二種
var fn = function() {}
box.addEventListener('click', fn)
// 能綁定多個實現體, 若是有屢次綁定, 按順序依次執行
// box.removerEventListener('click', fn)來取消事件的綁定
// 瞭解: 第三個參數決定冒泡順序(子父級誰先相應事件)

• 事件對象

// 系統回調事件函數時, 傳遞了一個 事件(event) 實參
// 若是要使用傳遞來的實參 事件(event), 定義接收的 形參 便可
box.onclick = function(ev){
    // 使用事件對象
    // 特殊按鍵 eg: ev.altKey: true | false
    // 鼠標觸發點: ev.clientX | ev.clientY
    
    // 取消冒泡
    ev.cancelBubber = true;
    
    // 取消默認事件
    return false;
}

事件總結

• 鼠標事件

var box = document.querySelector('.box');
// 1. 點擊事件
box.onclick = function () {
    console.log("單擊");
};
// 2. 雙擊事件(應用場景不廣)
box.ondblclick = function () {
    console.log("雙擊");
};
// 3. 鼠標右鍵
box.oncontextmenu = function () {
    console.log("右鍵了");
    return false;
};
// 4. 鼠標懸浮 | 移動 | 按下 | 擡起 | 離開
box.onmouseover = function () {
    console.log("懸浮");
};
box.onmousemove = function () {
    console.log("移動");
};
box.onmousedown = function () {
    console.log("按下");
};
box.onmouseup = function () {
    console.log("擡起");
};
box.onmouseout = function () {
    console.log("離開");
}

// over | out   VS   enter | leave
// 總結:
// 1. 將子級與父級分開考慮, 你們都有各自的懸浮離開事件, 採用 over | out 組合
// 2. 將子級歸入父級考慮範圍, 也就是隻有父級去相應懸浮離開事件, 採用 enter | leave 組合
// 3. 單獨考慮一個盒子的懸浮離開事件, 兩套都可以

// 特性
// 從父級移至子級, 會觸發out事件, 緊接着觸發子級的over事件, 並能夠冒泡給父級
// 從父級移至子級, leave事件並不會觸發, 它認爲子級是屬於父級的一部分, enter事件, 也不會再次觸發

// 懸浮子級:
// sub over => sup over  支持冒泡
// sup enter => sub enter  不支持冒泡

• 鍵盤事件

// onkeydown: 鍵盤按下會觸發, 長按會持續觸發
// onkeyup: 鍵盤擡起會觸發

// ev.keyCode: 按下的鍵盤鍵的標號

• 其餘事件

// window.onload: 頁面加載完畢觸發
// window.onscroll | document.onscroll => window.scrollY(頁面下滾距離): 頁面滾動觸發

js盒模型

// content: 經過計算後樣式獲取
// padding + content: box.clientWidth | box.clientHeight
// border + padding + content: box.offsetWidth | box.offsetHeight
// 絕對定位top|left: box.offsetTop | box.offsetLeft

動畫

• 定時器

// 一次性定時器
var timeout = setTimeout(function(a, b){}, 1000, 10, 20);

// 持續性定時器
var timer = setInterval(function(a, b){}, 1000, 10, 20);

// 清除定時器
// clearTimeout | clearInterval

//結論:
// 1. 定時器不會當即執行
// 2. 一次性定時器只執行一次, 持續性定時器不作清除的話會一直執行
// 3. 聲明定時器第一個參數爲邏輯函數地址, 第二個參數爲事件間隔, 第三個爲邏輯函數所需參數(能夠爲多個,通常省略)
// 4. 清除定時器能夠混用, 本質就是清除建立定時器時的數字標號, 該編號就是建立定時器時的返回值

// 小技巧: 若是頁面中有n個定時器
var n = setTimeout(function () {}, 1);
for (var i = 1; i < n; i++) {
    clearInterval(i)
}

原文出處：https://www.cnblogs.com/zuanzuan/p/10199299.html