web API簡介

簡介：API是一些預定義好的函數(shù)疲酌。

JavaScript 組成

• ECMAScript：
  

  • 定義了javascript的語法規(guī)范。
  • JavaScript的核心赌躺，描述了語言的基本語法和數(shù)據(jù)類型狼牺， ECMAScript是一套標準，定義了一種語言的標準礼患，與具體實現(xiàn)無關是钥。

• BOM 瀏覽器對象模型

  • 一套操作瀏覽器功能的API。
  • 通過BOM可以操作瀏覽器窗口缅叠，比如彈出框悄泥、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等等肤粱。

• DOM 文檔對象模型

  • 一套操作頁面元素的API弹囚。
  • DOM可以把HTML看做一個文檔樹，通過DOM提供的API可以對樹上的節(jié)點進行操作领曼。

DOM

簡介

• 文檔對象模型（Document Object Model）鸥鹉，是w3c推薦的處理可擴展的標記語言的標準編程接口。它是一種與平臺和語言無關的應用程序接口庶骄，可以動態(tài)的訪問程序和腳本毁渗，更新其內(nèi)容、結構和文檔風格单刁。HTML是將html元素轉(zhuǎn)換成document對象灸异，通過獲取對象中的屬性，來進行操作html的頁面元素羔飞。文檔可以進一步被處理肺樟，處理結果可以加入到當前的頁面。Dom是一種基于樹的API文檔逻淌，它要求在處理過程中么伯，將整個文檔都存儲在內(nèi)存中。

通過id獲取元素

• 語法：調(diào)用 document 對象的 getElementById 方法卡儒。
• 示例：document.getElementById("id名稱")
• 參數(shù)：字符串類型的 id 屬性值蹦狂。
• 返回：對應 id 名的元素對象誓篱。
• 注意：
  • 一般在接受返回值得時候，因為獲取的是一個DOM對象凯楔，在給變量命名的時候，習慣性的以英文"o"開頭锦募。
  • 由于id具有唯一性摆屯，在js中通過id獲取元素節(jié)點的時候，如果頁面中有相同名稱的id元素糠亩，則只會獲取第一個對象虐骑。

通過標簽名獲取元素

• 語法：調(diào)用 document 對象的 getElementsByTagName 方法。
• 示例：document.getElementsByTagName("標簽名")
• 參數(shù)：標簽名稱赎线。
• 返回：同名的元素對象組成的偽數(shù)組廷没。HTMLCollection。
• 注意：
  • 操作的時候需要按照操作數(shù)組的方法進行操作垂寥。
  • getElementsByTagName 獲取的元素是動態(tài)增加的颠黎。

元素對象內(nèi)部獲取標簽元素。

• 獲取的元素對象內(nèi)部滞项，本身也可以調(diào)用根據(jù)標簽獲取元素的方法狭归。例如 div 元素對象也可以調(diào)用 getElementsByTagName 方法。
• 目的：縮小元素的選擇范圍文判，類似于CSS的后代選擇器过椎。

通過 name 屬性獲取元素

• 語法：調(diào)用 document 對象的 getElementsByName 方法。
• 示例：document.getElementsByName("name名稱")
• 參數(shù)：字符串類型的 name 屬性值戏仓。
• 返回：name 屬性值相同的元素對象組成的數(shù)組疚宇。
• 注意：
  • 不建議使用，因為在IE和Opera中有兼容問題赏殃，會多選中id名稱相同的元素敷待。
  • 方法選中的元素也是動態(tài)變化的。

通過類名獲取元素

• 方法：調(diào)用 decument 對象的 getElementsByClassName 方法嗓奢。
• 參數(shù)：字符串類型的 class 屬性值讼撒。
• 返回：class 屬性值相同的元素對象組成的數(shù)組。
• 瀏覽器兼容問題：不支持IE8及以下瀏覽器股耽。

通過選擇器獲取元素

• 方法1：調(diào)用 decument 對象的 querySelector()方法根盒，通過css中的選擇器，選取第一個符合條件的標簽元素物蝙。
• 方法2：調(diào)用 decument 對象的 querySelectorAll()方法炎滞，通過css選擇器去選取所有符合條件的標簽元素。
• 示例1：decument.querySelector("#main")
• 示例2：decument.querySelectorAll("#list li")
• 參數(shù)：字符串類型的 css 中的選擇器诬乞。
• 返回：
  • querySelector() 返回指定元素册赛。
  • querySelectorAll() 返回節(jié)點集合钠导， NodeList
• 注意：不會動態(tài)添加。
• 瀏覽器兼容問題：不支持IE8以下的瀏覽器森瘪。

事件

簡介

• 事件：表示在什么時間做什么事
• 執(zhí)行機制：觸發(fā) 響應機制
• 綁定事件(注冊事件)三要素：
  • 事件源：給誰綁定事件
  • 事件類型：綁定什么類型的事件
  • 事件函數(shù)：事件發(fā)生后執(zhí)行什么內(nèi)容牡属，寫在函數(shù)內(nèi)部。

事件監(jiān)聽

• JavaScript解析器會給有綁定事件的元素添加一個監(jiān)聽扼睬，解析器會一直監(jiān)測這個元素逮栅，只有觸發(fā)對應的綁定事件，就會立刻執(zhí)行事件函數(shù)窗宇。

常用的鼠標事件類型

常用事件監(jiān)聽方法

• 方法1：綁定HTML元素屬性措伐，適用于比較簡單的事件類型
• 示例：

<input type="button" value="點擊"    onclick="alert('surprised')">

• 方法2：綁定DOM對象屬性
• 示例：

<input type="button" id="btn" value="點擊有驚喜">
<script>
    // 獲取元素
    let obtn = document.getElementById("btn")
        // 綁定事件
    obtn.onclick = function() {
        // 定義事件觸發(fā)后要做的事情
        alert("驚喜多多")
    };
</script>

DOM 元素屬性操作

非表單元素的屬性

• 例如：href、title军俊、id侥加、src等、
• 調(diào)用方式：元素對象打點調(diào)用屬性名粪躬，例如 obj.href
• 注意：

  • 部分的屬性名跟關鍵字和保留字沖突担败，會更換寫法。

    • class -- className
    • for -- htmlFor
    • rowspan -- rowSpan

  • id元素是可讀的短蜕，不可以修改氢架。

• 屬性賦值：給元素屬性賦值，等號右側的賦值都是字符串格式朋魔。

函數(shù)中的 this

• 在事件函數(shù)中有一個 this岖研，指向事件源。
• 在普通函數(shù)中警检，this 指向window 對象孙援。
• 在構造函數(shù)中，this 指向的是生成的實例對象扇雕。
• 在對象的方法中拓售，this 指向的是對象本身。

獲取標簽內(nèi)部內(nèi)容的屬性

• innerHTML屬性：在獲取標簽內(nèi)部內(nèi)容時镶奉，如果包含標簽础淤，獲取的內(nèi)容會包含標簽，獲取的內(nèi)容也會包括空白哨苛，換行等鸽凶。
• innerText屬性：在獲取標簽內(nèi)部內(nèi)容時，如果包含標簽建峭，獲取的內(nèi)容會過濾標簽玻侥，獲取的內(nèi)容會去掉換行和縮進等空白。

更改標簽內(nèi)容

• innerHTML 設置屬性值亿蒸，有標簽的字符串凑兰，會按照HTML語法中的標簽加載掌桩。在設置有內(nèi)部子標簽結構的時候使用。
• innerText 設置屬性值姑食，有標簽的字符串波岛，會按照普通的字符串加載。一般在設置純字符串時候使用音半。

表單元素屬性

• value 用于大部分表單元素的內(nèi)容獲扰枭（option除外）。
• type 可以獲取input標簽的類型（輸入框或復選框）祟剔。
• disabled 禁用屬性。
• checked 復選框選中屬性摩梧。
• selected 下拉菜單選中屬性物延。
• 注意：在 DOM 中元素對象的屬性值只有一個時，會被轉(zhuǎn)換成布爾值顯示仅父，如 txt.disabled = true;

自定義屬性操作

• 元素可以進行自定義屬性叛薯，直接在元素內(nèi)部書寫。

<div id="box" age=18></div>

• 獲取自定義屬性值時候不可以直接使用打點調(diào)用的方法笙纤，如下代碼返回undefined

var obox = document.getElementById("box")
obox.id // box
obox.age  // undefined

• getAttribute(name) 獲取標簽行內(nèi)屬性
• setAttribute(name, value) 設置標簽行內(nèi)屬性
• removeAttribute(name) 移除標簽行內(nèi)屬性
• 與element.屬性的區(qū)別：上述三個方法用于獲取任意的行內(nèi)屬性耗溜，包括自定義的屬性。

style樣式屬性

• 使用 style 屬性方式設置的樣式顯示在標簽行內(nèi)省容。

• element.style 屬性的值抖拴，是所有行內(nèi)樣式組成的一個樣式對象。

• 樣式對象可以繼續(xù)打點語法調(diào)用或者更改 css 的行內(nèi)樣式屬性腥椒，例如 widht阿宅、height 等屬性。

• 注意：

  • 類似 background-color 這種復合屬性的單一屬性寫法笼蛛，是由多個單詞組成的洒放，要修改為駝峰命名方式 書寫為 backgroundColor。
  • 通過樣式屬性設置寬高滨砍、位置的屬性類型是字符串往湿，需要加上 px 等單位。

• 應用場景：

  • 如果修改的樣式為單一樣式惋戏，可以選擇直接使用style進行修改领追。
  • 如果修改的樣式有很多條 css 樣式，可以提前將修改后的樣式設置到一個類選擇器中日川，后續(xù)通過修改類名的方式蔓腐，批量修改 css 樣式。但是需要注意 css 的權重龄句。

排他思想

• 在一組標簽中回论，如果給標簽添加事件散罕，但是僅僅只需要當前被選中的元素發(fā)生變化，當不被選中時傀蓉，恢復默認樣式欧漱，這需要用到排他思想。比如輪播圖中當前元素下面小圓點顯示高亮葬燎，其他都是默認顏色误甚。
• 主要步驟分為兩步，第一是排除其他谱净，第二是保留自己窑邦。排除其他通過for循環(huán)，讓每個元素都設置成默認樣式壕探，然后再單獨對需要發(fā)生變化的元素進行樣式的添加或修改冈钦。

<script>
    var oinputArr = document.getElementsByTagName("input");
    for (var inputs of oinputArr) {
        inputs.onfocus = function() {
            // 排它思想
            // 排除所有
            for (var oinput of oinputArr) {
                oinput.style.backgroundColor = ""
                };
            // 選擇自己
            this.style.backgroundColor = "red"};
        };
</script>

// tab欄切換
var ohd = document.getElementById("hd")
var ospans = ohd.getElementsByTagName("span")
var obd = document.getElementById("bd")
var odivs = obd.getElementsByTagName("div")

for (var i = 0; i < ospans.length; i++) {
    // 自定義 index 屬性
    ospans[i].index = i;
    // 綁定鼠標經(jīng)過事件
    ospans[i].onmousemove = function() {
        for (var k = 0; k < ospans.length; k++){
            ospans[k].className = "";
            odivs[k].className = "";
            };
        this.className = "current"
        odivs[this.index].className = "current";
    };
};

節(jié)點屬性

• 每一個元素就是一個節(jié)點，而每一個節(jié)點就是一個對象瞧筛。也就是說白翻，我們在操作元素時恩急，其實就是把這個元素看成一個對象衷恭，然后使用這個對象的屬性和方法來進行相關操作纯续。

• 表示元素的叫做元素節(jié)點，表示屬性的叫做屬性節(jié)點显沈，表示文本的叫做文本節(jié)點。節(jié)點和元素是不一樣的概念魔慷，節(jié)點是包含元素的蜻展。

• 在JavaScript中可以使用 nodeType 屬性來判斷一個節(jié)點的類型。

• 一個元素就是一個節(jié)點沪饺，這個節(jié)點稱為元素節(jié)點啼器。

• 只有元素節(jié)點才有子節(jié)點，屬性節(jié)點和文本節(jié)點沒有子節(jié)點岳颇。

• nodeType

• nodeName 節(jié)點的名稱(標簽名稱)，只讀释移。
• nodeValue 節(jié)點值 返回或者設置當前的節(jié)點值。元素節(jié)點的節(jié)點值始終是null

父子節(jié)點常用屬性

• childNodes：只讀屬性寥殖，獲取一個節(jié)點所有子節(jié)點的實時集合玩讳，集合是動態(tài)變化的。

語法：obj.childNodes
說明：obj表示通過getElementById等方法獲取到的元素對象嚼贡。
返回結果：NodeList[]熏纯，數(shù)組中包含換行符與 標簽元素。

• children：只讀屬性粤策，返回一個節(jié)點所有的子元素節(jié)點的集合樟澜，是一個動態(tài)更新的HTML元素集合。

語法：obj.children
說明：obj表示通過getElementById等方法獲取到的元素對象叮盘。
返回結果：HTMLCollection[]秩贰，數(shù)組中只包含標簽元素。

• firstChild：只讀屬性柔吼，返回該節(jié)點的第一個子節(jié)點毒费，如果該節(jié)點沒有子節(jié)點則返回null。

語法：obj.firstChild
說明：obj表示通過getElementById等方法獲取到的元素對象愈魏。
返回結果：觅玻，NodeList數(shù)組中的第一個元素。

• lastChild：只讀屬性培漏，返回該節(jié)點的最后一個子節(jié)點溪厘，如果該節(jié)點沒有子節(jié)點返回null。

語法：obj.lastChild
說明：obj表示通過getElementById等方法獲取到的元素對象牌柄。
返回結果：畸悬，NodeList數(shù)組中的最后一個元素。

• firstElementChild：獲取所有元素類型的子節(jié)點的第一個元素珊佣。

語法：obj.firstElementChild
說明：obj表示通過getElementById等方法獲取到的元素對象傻昙。
返回結果：HTMLCollection數(shù)組中的第一個元素。

• lastElementChild：獲取所有元素類型的子節(jié)點的最后一個元素彩扔。

語法：obj.lastElementChild
說明：obj表示通過getElementById等方法獲取到的元素對象妆档。
返回結果：HTMLCollection數(shù)組中的最后一個元素。

• parentNode：返回一個當前節(jié)點的父節(jié)點虫碉，如果沒有這樣的節(jié)點贾惦，這個屬性返回null
• parentElement：返回當前節(jié)點的父元素節(jié)點，如果該元素沒有父節(jié)點，或者父節(jié)點不是一個DOM元素须板，則返回null碰镜。

語法：obj.parentNode/obj.parentElement
說明：obj表示通過getElementById等方法獲取到的元素對象。
返回結果：父級元素习瑰。

兄弟節(jié)點的常用屬性

• nextSibling：只讀屬性绪颖，返回與該節(jié)點同級的下一個節(jié)點，如果沒有返回null甜奄。
• previousSibling：只讀屬性柠横，返回與該節(jié)點同級的上一個節(jié)點，如果沒有返回null课兄。
• nextElementSibling：只讀屬性牍氛，返回與與該節(jié)點同一級的下一個元素節(jié)點，如果沒有返回null烟阐。
• previousElementSibling：只讀屬性搬俊，返回與該節(jié)點同一級的上一個元素節(jié)點，如果沒有返回null蜒茄。
• 注意：nextElementSibling和previousElementSibling有兼容問題唉擂，IE9以后才支持。

動態(tài)創(chuàng)建元素

• 在JavaScript中可以使用 createElement() 來創(chuàng)建一個元素節(jié)點檀葛，也可以使用 createTextNode() 來創(chuàng)建一個文本節(jié)點楔敌，也可以使用 createAttribute() 創(chuàng)建一個屬性節(jié)點。然后可以將文本節(jié)點和元素節(jié)點組裝成一個"有文本內(nèi)容的元素"驻谆。

• 語法：

// 動態(tài)創(chuàng)建元素節(jié)點
var el = document.createElement("元素名");
// 動態(tài)創(chuàng)建屬性節(jié)點
val cls = document.createAttribute("屬性名")
// 動態(tài)創(chuàng)建文本節(jié)點
var text = document.createTextNone("文本內(nèi)容");
// 將文本節(jié)點插入到元素節(jié)點
text.appendChild(el);
// 將元素節(jié)點插入到body元素中。
document.body.appendChild(el);

• 如果想在動態(tài)創(chuàng)建的節(jié)點中添加屬性庆聘，可以通過 .屬性值 的方法胜臊，為動態(tài)創(chuàng)建的元素節(jié)點添加屬性。在添加class屬性的時候伙判，仍是需要使用 className 象对，而不是直接使用 class。

// 動態(tài)創(chuàng)建一個 input 標簽
var oinput = document.createElement("input");
oinput.id = "input";
oinput.type = "button";
oinput.value = "提交";
oinput.className = "btn";

// 將input標簽插入到body元素中
document.body.appendChild(oinput);

• 綜上示例宴抚，如果想要動態(tài)創(chuàng)建一個元素勒魔，需要以下四步
  • 創(chuàng)建子元素節(jié)點 createElement()。
  • 創(chuàng)建文本節(jié)點 createTextNode()菇曲。
  • 把文本節(jié)點插入到元素節(jié)點 appendChild()冠绢。
  • 把元素節(jié)點插入到已有元素中 appendChild()。

插入元素

• 在JavaScript中可以使用 appendChild() 和 insertBefore() 兩個方法常潮，把一個新元素插入到父元素中弟胀。

• 注意：appendChild() 和 insertBefore() 這兩種插入元素的方法都需要先獲取父元素才可以操作

appendChild()

• appendChild() 把一個新元素插入到父元素的內(nèi)部 子元素 的末尾。

• 語法：

  • A.appendChild(B);

• 說明：

  • A表示父元素，B表示動態(tài)創(chuàng)建好的新元素孵户。

• 注意：將原有節(jié)點通過appendChild插入到父級元素中的時候萧朝，實際上進行了兩步操作，第一步先將原始節(jié)點刪除夏哭，第二步將元素添加到父元素的最后检柬。

insertBefore()

• insertBefore() 將一個新元素插入到父元素內(nèi)部中某一個子元素之前。
• 語法：
  • A.insertBefore(B, ref)
• 說明：
  • A表示父元素竖配，B表示動態(tài)創(chuàng)建好的新元素何址，ref表示指定子元素。表示在ref之前插入新元素B械念。如果ref為null头朱，則會將新元素插入到子節(jié)點的末尾。

替換元素

• JavaScript中龄减，可以使用 replaceChild() 方法來替換當前節(jié)點的子節(jié)點项钮。

• 語法：

  • A.replaceChild(newChild, oldChild)

• 說明：

  • 用指定的節(jié)點替換當前節(jié)點的一個子節(jié)點，并返回被替換掉的節(jié)點希停。

刪除元素

• JavaScript中烁巫，我們可以使用 removeChild() 方法來刪除父元素下的某個子元素。

• 語法：

  • A.removeChild(B)

• 說明：

  • A表示父元素宠能，B 表示父元素內(nèi)部的某個子元素亚隙。

• 注意：在刪除元素之前必須要找到被刪除的元素和被刪除元素的父元素。

復制元素

• 在JavaScript中违崇，我們可以使用 cloneNode() 方法來實現(xiàn)復制元素阿弃。

• 語法：

  • obj.cloneNode(bool)

• 說明：

  • obj表示被復制的元素，參數(shù)bool是一個布爾值羞延，取值如下
  • 1或true：表示復制元素本身以及復制該元素下的所有子元素渣淳。
  • 0或false：表示僅復制元素本身，不復制該元素下的子元素伴箩。

• 注意：克隆時入愧，標簽上的屬性和屬性值也會被復制，寫在標簽行內(nèi)的綁定事件也可以被復制嗤谚，但是通過JavaScript動態(tài)綁定的事件不會被復制棺蛛。

節(jié)點判斷方法

• hasChildNodes()，判斷調(diào)用元素是否包含子節(jié)點巩步。不區(qū)分節(jié)點類型旁赊。

• 語法：

  • Node.hasChildNodes()

• 說明：

  • 沒有參數(shù)，返回一個Boolean布爾值椅野。用來表示該元素是否包含子節(jié)點彤恶。

• contains(child)：返回一個boolean布爾值钞钙，表示傳入的節(jié)點是否是調(diào)用元素的后代節(jié)點。

• 語法：Node.contains(child) 表示傳入的節(jié)點是否是調(diào)用元素的后代節(jié)點声离。

判斷方法總結

• node.firstChild !== null; // 表示有子節(jié)點
• node.ChildNodes.length > 0; // 表示有子節(jié)點
• node.hasChildNodes()

注冊事件的其他方法

addEventListener()

• elemennt.addEventListener() 方法

• 參數(shù)：

  • 第一個參數(shù)：事件類型的字符串（直接書寫"click"芒炼，不需要加 on）。
  • 第二個參數(shù)：事件函數(shù)术徊。
  • 第三個參數(shù)：true/false true表示事件捕獲本刽，false表示事件冒泡。

• 同一個元素可以多次綁定事件監(jiān)聽赠涮，同一個事件類型可以注冊多個事件函數(shù)子寓。事件會根據(jù)一個書寫的順序進行排隊。

• 兼容性問題：不支持 IE9 以下的瀏覽器笋除。

// 當點擊btn按鈕的時候斜友，會先彈出1，然后再彈出2垃它。
// 如果參數(shù)2的位置傳入預先自定義好的函數(shù)鲜屏，注意不要在函數(shù)名稱后面添加小括號。

var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
    alter(1);
    };
)
function clickEvent() {
    alter(2);
}

btn.addEventListener("click", clickEvent)

attachEvent()

• element.attachEvent() 方法

• 參數(shù)：

  • 第一個參數(shù)：事件類型的字符串国拇，需要加 on洛史。
  • 第二個參數(shù)：事件函數(shù)。

• 同一個元素可以多次綁定事件監(jiān)聽酱吝，同一個事件類型可以注冊多個事件函數(shù)。

• 兼容性問題：只支持 IE10 及以下的瀏覽器务热。IE8 及以下在處理事件隊列的時候，會出現(xiàn)數(shù)據(jù)順序錯亂崎岂。

自定義注冊事件的兼容寫法

• 參數(shù)：

  • 事件源
  • 事件類型（不加on）
  • 事件函數(shù)

• IE9 以上使用 addEventListener() 方法。

• IE9 以下使用 attachEvent() 方法该镣。

• 判斷瀏覽器時响谓，不需要判斷瀏覽器的版本，可以檢測瀏覽器的能力娘纷，將某個方法作為 if 語句的判斷條件，如果瀏覽器認識該方法返回 true赖晶，如果不認識返回 false辐烂。

<input type="button" id="btn">
<script>
    var obtn = document.getElementById("btn");
        function addEvent(ele, type, fn) {
            // ele: 事件源
            // type: 事件類型 不加 on
            // fn: 事件函數(shù)
            if (ele.addEventListener) {
                ele.addEventListener(tyle, fn);
            } else if (ele.attachEvent) {
                ele.attachEvent("on" + type,fn);
            };
        };
    // 調(diào)用函數(shù)
    addEvent(obtn, "click", function () {
        alter(1);
    })

事件解除綁定方法

DOM 0級事件解綁方法

btn.onclick = function () {
    alter(1)
};
btn.onclick = null;

removeEventListener()

• element.removeEventListener() 方法

• 參數(shù)：

  • 第一個參數(shù)：事件類型的字符串纠修，不需要加 on
  • 第二個參數(shù)：事件函數(shù)引用名。

• 注意：沒有辦法移除一個匿名函數(shù)扣草，所以在注冊事件時需要單獨聲明一個有函數(shù)名的事件函數(shù)，

• 兼容問題：不支持 IE9 以下的瀏覽器颜屠。

detachEvent()

• element.detachEvent() 方法

• 參數(shù)：

  • 第一個參數(shù)：事件類型的字符串 需要加 on
  • 第二個參數(shù)：事件函數(shù)引用名辰妙。

• 注意：沒有辦法移除一個匿名函數(shù)，所以在注冊事件時需要單獨聲明一個有函數(shù)名的事件函數(shù)甫窟，

• 兼容問題：只支持 IE10 及以下的瀏覽器密浑。

自定義解綁事件的兼容寫法

function removeEvent(ele, type, fn) {
    // ele: 事件源
    // type: 事件類型 不加 on
    // fn: 事件函數(shù)
    if (ele.removeEventListener) {
        ele.removeEventListener(type, fn);
    } else if (ele.detachEvent) {
        ele.detachEvent("on" + type, fn);
    };
}

事件流的三個階段

• 第一階段：事件捕獲。
• 第二階段：事件執(zhí)行過程粗井。
• 第三階段：事件冒泡尔破。
• addEventListener() 第三個參數(shù)為 false 時，事件冒泡
• addEventListener() 第三個參數(shù)為 true 時背传，事件捕獲
• onclick 類型：只能進行事件冒泡過程呆瞻，沒有捕獲階段。
• attachEvent() 方法：只能進行事件冒泡過程径玖，沒有捕獲階段

事件冒泡應用--事件委托

<div>
    <ul id="ul">
        <li>唐三藏</li>
        <li>孫悟空</li>
        <li>豬悟能</li>
        <li>沙悟凈</li>
    </ul>
</div>
<script>
// 事件委托
var oul = document.getElementById("ul");
var olis = oul.children;

// 將子級的公共類型的事件痴脾，委托給父級添加，在父級內(nèi)部找到真正觸發(fā)事件的最底層的事件源梳星。

oul.onclick = function(e) {
    // e 表示事件對象
    // 只要觸發(fā)事件赞赖，函數(shù)內(nèi)部就可以得到一個事件對象，對象中存儲了關于事件的一系列數(shù)據(jù)
    // e.target 屬性記錄的就是真正觸發(fā)事件的事件源冤灾。
    for (var oli of olis) {
        oli.style.backgroundColor = "";
    };
    console.log(e.target)
    e.target.style.backgroundColor = "pink";
}

事件對象

• 只要觸發(fā)事件前域，就會有一個對象。內(nèi)部存儲了與事件相關的數(shù)據(jù)韵吨。
• e 在低版本瀏覽器中有兼容問題匿垄，低版本的瀏覽器使用的是window.event。
• 事件對象的常用屬性：

取消默認行為和阻止事件傳播的方式

offset 偏移量屬性

• offsetParent 偏移參考父級芯砸，距離自己最近的有對象的父級给梅，如果都沒有定位动羽，參考body或html
• offsetLeft/offsetTop 偏移位置，如果父級沒有定位的話渴邦，尋找的是當前元素左上角定點的位置到瀏覽器左谋梭、上部的位置瓮床，如果父級元素有定位产镐，則尋找的是父級元素的邊框以內(nèi)到當前元素邊框以外的左癣亚、上的位置
• offsetWidth/offsetheight 偏移大小，獲取的是自身的寬度和高度街州，包含邊框和本身的padding值唆缴。

client 客戶端系列屬性

• client 系列沒有參考父級元素
• clientLeft/clientTop 邊框區(qū)域尺寸琐谤，不常用
• clientWidth/clientHeight 邊框內(nèi)部大小玩敏，將元素本身當成了一個客戶端。獲取元素的大小织阳，不包含邊框砰粹。

scroll 滾動偏移系列屬性

• scrollLeft/scrollTop 盒子內(nèi)部滾動出去的尺寸碱璃。
• scrollWidth/scrollHeight 盒子內(nèi)容的寬度和高度。

BOM 請參考 http://www.reibang.com/p/f3101af37998