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)
}