webAPI(DOM) 2.1 獲取頁面元素 | 事件1 | 屬性操做 | 節點 | 建立元素 | 事件2

時間 2020-05-27

標籤 webapi dom 2.1 獲取頁面元素事件屬性節點建立欄目 HTML 简体版

原文原文鏈接

js分三個部分：
ECMAScript標準：js的基本語法
DOM:Ducument Object Model--->文檔對象模型--->操做頁面的元素
BOM:Browser Object Model--->瀏覽器對象---->操做瀏覽器javascript

1，什麼是api-----能夠理解爲一套方法(或者工具）
2，什麼是webapi-----那就是網絡提供的方法(或者工具）html

獲取頁面元素的幾種方法

1，根據標籤名獲取元素java

document.getElementsByTagName('div');　　// 可以獲取全部div標籤node

能夠經過已找到的元素來調用web

2，根據標籤的class屬性獲取元素api

document.getElementsByClassName('nav');　　// 可以獲取全部class="nav"的元素數組

能夠經過已找到的元素來調用瀏覽器

在IE9之後的版本才支持！網絡

3，根據標籤的name屬性獲取元素app

document.getElementsByName('mv');　　// 能獲取全部name="mv"的元素

在不一樣瀏覽器工做的方式不一樣，在IE和Opera瀏覽器下這個方法

將返回具備id屬性和name屬性是這個值的！

4，根據標籤的id屬性獲取元素

document.getElementById('btn');　　// 只能獲取第一個id="btn"的元素

只能經過document來調用！

5，根據選擇器來查找元素:

document.querySelector('ul li');　　// 只能獲取第一個元素

document.querySelectorAll('ul li');　　// 能夠獲取ul下的全部li元素

有瀏覽器兼容性問題，在IE8之後的版本纔會執行。移動端開發能夠直接使用，不用擔憂兼容性問題

事件1

事件：就是當何時作什麼事情

觸發~響應

1，先獲取元素

2，給元素註冊事件

　　事件名稱

　　事件源

　　事件處理函數

實例：點擊按鈕後彈出窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>

<input type="button" value="點我" id="btn">
<script>
    // 先獲取元素
    var btn = document.getElementById('btn'); // 註冊事件
    btn.onclick = function () { alert('點到我了'); } </script>

</body>
</html>

View Code

例子1：點擊按鈕切換圖片

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
    <input type="button" value="點我" id="btn">
    <br />
    <img src="images/a.jpg" id="mv" />

    <script>
         // 獲取元素
         var btn = document.getElementById('btn'); var mv = document.getElementById('mv'); // 標誌位，保證兩種照片能夠來回切換
        var flag = true; // 註冊事件
        btn.onclick = function () { if (flag) { mv.src = 'images/b.jpg'; flag = false; } else { mv.src = 'images/a.jpg'; flag = true; } } </script>
</html>

View Code

屬性操做

非表單的屬性 : 只展現出來給用戶看

表單元素：能夠和用戶進行交互　　如 input button

非表單的屬性： href, title, alt, id, src, className

而這些屬性都是能夠修改的

實例：

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
    <a href="http://www.baidu.com" id="link">百度</a>
    <script>
    
    var link = document.getElementById('link'); // 修改連接
    link.href = 'http://www.jd.com'; </script>
</html>

View Code

例子：點擊按鈕div顯示或隱藏

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
    <style>
    * { margin: 0; padding: 0; } #box { width: 200px; height: 200px; background-color: pink; } .show { display: block; } .hidden { display :none; } </style>
</head>
    <input type="button" value="隱藏" id="btn">
    <br />
    <div class="show" id="box"></div>

    <script>



    // 獲取元素
    var btn = document.getElementById('btn'); // 標誌位，控制來回切換
    var isShow = true; // 註冊事件
    btn.onclick = function () { // 獲取元素
        var box = document.getElementById('box'); // div是否顯示
        if (isShow) { // 修改元素的類名 // className爲何DOM對象的對應標籤的class屬性的名字叫作className, // 由於class在javascript中是關鍵字，關鍵字不能夠做爲變量或者屬性的名字。
            box.className = 'hidden'; // 修改按鍵的屬性。 // this的幾種狀況： // 1，在函數內----指向window // 2，在構造函數中----指向的是構造函數建立的對象 // 3，在方法中----指向的是這個方法所屬的對象 // 4，在事件處理函數中----誰調用該事件，this就指向誰
            this.value = '顯示'; isShow = false; } else { box.className = 'show'; this.value = '隱藏'; isShow = true; } } </script>
</html>

View Code

取消a標籤的默認行爲：不會跳轉到href指定的頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="http://www.baidu.com" id="link">百度</a>

    <script>
    // 獲取元素
    var link = document.getElementById('link'); // 註冊事件
    link.onclick = function () { alert('hello world'); // 重要的一步：取消a標籤的默認行爲
        return false; } </script>
</body>
</html>

test

job：相冊（來回切換照片）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /** { padding: 0; margin: 0; }*/
    /* 清除浮動*/ .clearfix:after { content: 0; display: block; height: 0; visibility: hidden; clear: both; } .clearfix { *zoom: 1; } /*a標籤*/ #imagegallery a { display: inline-block; margin: 0 20px 20px 0; padding: 0; text-decoration: none; } #imagegallery a img { border: 0; } </style>
</head>
<body>
    <h2> 美女畫廊 </h2>
    <div id="imagegallery" class="clearfix">
        <a href="images/1.jpg" title="美女A">
            <img src="images/1-small.jpg" width="100px" alt="美女1">
        </a>
        <a href="images/2.jpg" title="美女B">
            <img src="images/2-small.jpg" width="100px" alt="美女2">
        </a>
        <a href="images/3.jpg" title="美女C">
            <img src="images/3-small.jpg" width="100px" alt="美女3">
        </a>
        <a href="images/4.jpg" title="美女D">
            <img src="images/4-small.jpg" width="100px" alt="美女4">
        </a>
    </div>

    <img id="image" src="images/placeholder.png" width="450px" />
    <p id="des">請選擇一張照片</p>

    <script>
    // 獲取全部的a元素
    var imagegallery = document.getElementById('imagegallery'); var links = imagegallery.getElementsByTagName('a'); // 給全部的a元素添加事件
    for (var i = 0; i < links.length; i++) { // 全部的a標籤對應的元素
        var link = links[i]; link.onclick = function () { // 獲取佔位圖
            var image = document.getElementById('image'); // 切換圖片
            image.src = this.href; // 獲取p元素
            var des = document.getElementById('des'); // 設置p標籤的內容
            des.innerText = this.title; //取消a標籤的默認行爲
            return false; } } </script>
</body>
</html>

job

打印對象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box"> hello world <span>Hi</span>
    </div>

    <script>
    // 獲取元素
    var box = document.getElementById('box'); // 打印這個對象
    console.dir(box);        // div#box // 獲取內部文本
    console.log(box.innerText);        // hello world Hi // 獲取內部文本和標籤(有標籤時)
    console.log(box.innerHTML);        // 

    </script>
</body>
</html>

test

innerHTML：獲取內部文本和標籤（若是有標籤）

innerText / textContent：獲取內部文本（不包含標籤），有瀏覽器兼容問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">hello</div>
    <script>
        // innerText的瀏覽器兼容處理
 function getInnerText(element) { // 判斷是否有innerText屬性
            if (typeof element.innerText === 'string') { // 瀏覽器支持innerText則使用
                return element.innerText; } else { // 瀏覽器不支持innerText，則使用textContent
                return element.textContent; } } // 獲取元素
        var box = document.getElementById('box'); // 傳入函數
 alert(getInnerText(box)) </script>
</body>
</html>

innerText的瀏覽器兼容處理

設置內容時該什麼方法：

innerText / textContent　　// 內容不帶標籤

innerHTML　　　　　　　// 內容帶標籤

當設置不含標籤的內容時候，應該使用innerText，它的效率高！

表單元素屬性：

value　　　　// 用於大部分表單元素的內容獲取(option 除外)

type　　　　// 能夠獲取input標籤的類型（輸入框或複選框等）

checkeed　　// 複選框選中屬性。（返回的值是布爾類型）

selected　　// 下拉菜單選中屬性。（返回的值是布爾類型）

文本域的相關屬性設置：
disabled　　// 禁用屬性。讓用戶沒法輸入內容。（返回的值是布爾類型）
readOnly 　 // 只讀不能修改
.value　　 // 能夠修改文本域裏面的內容---建議使用這種
.innerText　　// 能夠修改文本域裏面的內容

job：點擊按鈕禁用文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="點我" id="btn">
    <input type="button" value="寫入內容" id="btn1">
    <br />
    <input type="text" id="text" value="123">
    <script>

    // 獲取元素
    var btn = document.getElementById('btn'); // 註冊事件
    btn.onclick = function () { var text = document.getElementById('text'); // 禁止屬性。只是讓用戶沒法輸入。但仍是能夠經過代碼寫入內容
        text.disabled = true; } // 獲取元素
    var btn1 = document.getElementById('btn1'); // 註冊事件
    btn1.onclick = function () { // 獲取元素
        var text = document.getElementById('text'); // 寫入內容。
        text.value = 'hello world'; } </script>
</body>
</html>

job

job：給文本框賦值，獲取文本框的值---兩種實現方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> input { display: block; margin: 10px 10px; } </style>
</head>
<body>
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="button" value="獲取文本框的值" id="btn">

    <script>
        // 給文本框賦值，獲取文本框的值 // 1，先給文本框賦值 // 
        // 獲取全部input元素
        var inputs = document.getElementsByTagName('input'); // 拿到每個input元素
        for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; // 判斷是否是文本框
            if (input.type === 'text') { input.value = i; } } // 2，獲取文本框的值 //
        // 獲取btn元素
        var btn = document.getElementById('btn'); // 註冊事件
        btn.onclick = function () { // 存儲所有文本框的值
            var array = []; // 獲取全部文本框的值
            for (var i = 0; i < inputs.length; i++) { // 判斷是否是文本框
                var input = inputs[i]; if (input.type === 'text') { array.push(input.value); } } // 拼接成0|1|2|3|4|5|6|7|8|9
            var s = array.join('|'); console.log(s); } </script>
</body>
</html>

實現方法1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> input { display: block; margin: 10px 0; } </style>
</head>
<body>
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="button" value="獲取全部屬性的值" id="btn">


    <script>
        // 1，給全部文本框賦值 // 
        // 獲取全部input元素
        var inputs = document.getElementsByTagName('input'); // 遍歷全部input元素
        for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; // 判斷是否是文本框
            if (input.type === 'text') { // 給文本框賦值
                input.value = i; } } // 2，獲取全部文本框中的值，並拼接 // 獲取按鈕元素
        var btn = document.getElementById('btn'); // 註冊事件
        btn.onclick = function () { // 存儲全部文本框的值
            var str = ''; // 遍歷全部input元素
            for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; // 判斷是否是文本框
                if (input.type === 'text') { // 拼接字符串
                    str += input.value + '|'; } } var s = str.substr(0, str.length - 1); console.log(s); } </script>
</body>
</html>

實現方法2

自定義屬性：

setAttribute('屬性名', '值')　　// 設置自定義屬性

getAttribute('屬性名')　　　　// 獲取自定義屬性的值

removeAttribute('屬性名')　　// 移除自定義屬性或者自帶屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>111111</div>
<div>222222</div>
<div>333333</div>
<div>444444</div>
<div>555555</div>

<input type="button" value="移除自定義屬性" id="btn"/>


<script>
var Objs = document.getElementsByTagName('div'); // 遍歷
for (var i = 0; i < Objs.length; i++) { // 設置自定義屬性和值
    Objs[i].setAttribute('num', (i + 1)); // 根據標籤名獲取元素，爲元素註冊點擊事件，添加事件處理函數
    Objs[i].onclick = function () { // 獲取自定義屬性的值
        alert(this.getAttribute('num')); }; } // 根據id獲取元素，註冊點擊事件，添加事件處理函數
document.getElementById('btn').onclick = function () { // 遍歷
    for (var i = 0; i < Objs.length; i++) { // 移除自定義屬性
        Objs[i].removeAttribute('num'); } }; </script>
</body>
</html>

test

節點：node

介紹：

　　1，頁面上的全部內容都是節點：標籤是節點，屬性是節點，文本也是節點(文本有文字空格換行)

　　2，獲取標籤元素很是方便

節點的屬性：

　　節點的屬性:(可使用標籤(元素).出來,可使用屬性節點.出來,文本節點.點出來)

　　節點的類型 nodeType　　// 1 標籤節點，2 屬性節點，3 文本節點

　　節點的名字 nodeName　　// 大寫標籤名標籤節點，小寫屬性名屬性節點，#text 文本節點

　　節點的值 nodeValue　　　// Null 標籤節點，屬性名屬性節點，文本的內容　

獲取節點：　

　　1，只有標籤才能做爲父節點
　　2， .parentNode，.parentElement支持全部瀏覽器(谷歌，火狐，IE8）

　　3，.childNodes，children也支持全部瀏覽器(谷歌，火狐，IE8）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kay</title>
</head>
<body>
    <input type="button" value="獲取" id="btn"/>
    <ul id="uls">
        <li>kay1</li>
        <li>kay2</li>
        <li>kay3</li>
        <li id="middle">kay4</li>
        <li>kay5</li>
        <li>kay6</li>
        <li>kay7</li>
    </ul>
    <script>
        // 根據id獲取按鈕，註冊點擊時間，添加事件處理函數
        document.getElementById('btn').onclick = function () { // 根據id獲取元素li
            var middle = document.getElementById('middle'); // 獲取父節點
            console.log(middle.parentNode);    // 獲取到整個ul // 獲取父元素
            console.log(middle.parentElement);    // 獲取到也是整個ul // 獲取前一個兄弟元素
            console.log(middle.previousElementSibling);    // 獲取到kay3 // 獲取前一個兄弟節點
            console.log(middle.previousSibling);    // 返回#text(就是距離前一個元素中間的那段換行)
 } </script>
</body>
</html>

test

//獲取父節點
parentNode //獲取父元素
parentElement // 獲取子節點
childNodes //獲取子元素
children //獲取第一個子節點
firstChild // 獲取第一個子元素
firstElementChild //獲取最後一個子節點
lastChild //獲取最後一個子元素
lastElementChild //獲取前一個節點
previousSibling //獲取前一個元素
previousElementSibling //獲取後一個節點
nextSibling //獲取後一個元素
nextElementSibling

獲取節點的方法

瀏覽器兼容問題：

　　1，在IE8獲取子節點和兄弟節點被變成獲取子元素和兄弟元素
　　2，在IE8獲取父節點和父元素能夠正常獲取
　　//總結:凡是獲取節點的代碼在谷歌和火狐獲得的都是相關的節點
　　//凡是獲取元素的代碼在谷歌和火狐獲得的都是相關的元素
　　//從子節點和兄弟節點開始,凡是獲取節點的代碼在IE8中獲得的是元素,獲取元素的相關代碼,在IE8中獲得的是undefined----元素的代碼,iE中不支持

// 獲取任意一個父級元素的第一個子元素
function getFirstElementChild(element) { // 判斷瀏覽器是否支持
    if (typeof element.firstElementChild !== 'undefined') { // 返回第一個子元素
        return element.firstElementChild; } else { // node=第一個字節點
        var node = element.firstChild; // node.nodeType !== 1(不是標籤)
        while (node && node.nodeType !== 1) { // // node = 後一個字節點
            node = node.nextSibling; } return node; } } // 獲取任意一個父級元素的最後一個子元素
function getLastElementChild(element) { // 
    if (typeof element.lastElementChild !== 'undefined') { return element.lastElementChild; } else { // node=最後一個子節點
        var node = element.lastChild; // node.nodeType !== 1(不是標籤)
        while (node && node.nodeType !== 1) { // node = 前一個字節點
            node = node.previousSibling; } // 返回節點
        return node; } }

解決IE8兼容問題

建立元素：元素建立的三種方式：

1，document.write('標籤的代碼及內容')

// 缺陷:若是在頁面加載完畢後,經過這種方式建立元素,會把頁面的全部內容都清除(只剩下這個建立的元素)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>kay</title>
</head>
<body>
    <input type="button" value="獲取" id="btn"/>
    <ul id="uls">
        <li>kay1</li>
        <li>kay2</li>
        <li>kay3</li>
        <li id="middle">kay4</li>
        <li>kay5</li>
        <li>kay6</li>
        <li>kay7</li>
    </ul>
    <script>
        // 根據id獲取按鈕，註冊點擊時間，添加事件處理函數
        document.getElementById('btn').onclick = function () { document.write('<p>哈哈頁面消失了吧</p>'); } </script>
</body>
</html>

test

2，對象.innerHTML='標籤及代碼'

// 在誰裏面建立就應該是(誰.innerHTML)

document.getElementById('btn').onclick = function () { var middle = document.getElementById('middle'); middle.innerHTML = '<p>見證奇蹟的時刻</p>'; }

test

3，document.createElement('標籤的名字')

// 根據id獲取按鈕，註冊點擊時間，添加事件處理函數
document.getElementById('btn').onclick = function () { // 建立p元素
    var p = document.createElement('p'); // 設置p元素中間內容
    p.innerText = '見證奇蹟'; // 把建立的子元素，追加到父元素裏面
     document.getElementById('middle').appendChild(p); }

test

元素相關操做：

.appendChile(newChild) // 追加子元素
.insertBefore (newChild,refChild) // 在某元素以前插入新元素。.insertAfter在某元素以後插入新元素
.replaceChild (newChild,refChild) // 替換子元素
.removeChild(oldChild) // 移除子元素

job：

// 第一種實現方式
my$('btn').onclick = function () { // 若是這個按鈕存在
    if (my$('btn1')) { // 移除這個按鈕
        my$('dv').removeChild(my$('btn1')); } // 建立按鈕
    var input = document.createElement('input') input.type = 'button'; input.value = '按鈕'; input.id = 'btn1'; // 追加
    my$('dv').appendChild(input); }; //--------------------- // 第二種實現方式
my$('btn').onclick = function () { // 判斷這個按鈕是否存在
    if (!my$('btn1')) {    // 按鈕不存在
        var obj = document.createElement('input'); obj.type = 'button'; obj.value = '按鈕'; obj.id = 'btn1'; my$('dv').appendChild(obj); } }

只建立一個按鈕

事件2

綁定事件的三種方式：

addEventListener和attachEvent能夠綁定多個相同事件!

a，.on事件名=事件處理函數　　// 谷歌，火狐，IE8都支持

缺點：不能綁定多個相同事件，假如綁定多個的話最終只有一個。

b，.addEventListener(type,listener,useCapture)　　//只有谷歌和火狐支持

//參數1:事件的類型---事件的名字,沒有on
//參數2:事件處理函數---函數(命名函數,匿名函數)
//參數3:布爾類型,目前就寫false

// 不支持IE8
document.getElementById('btn').addEventListener('click', function () { console.log('hello'); }, false);

test

c，.attachEvent(type,listener)　　//只有IE8支持

//參數1:事件類型---事件名字，有on
//參數2:事件處理函數---函數(命名函數,匿名函數)

// 只支持IE8
document.getElementById('btn').attachEvent('onclick', function () { console.log('hello'); });

test

解綁事件：對應以上的三種解綁方法

注意:用什麼方式綁定事件,就應該用對應的方式解綁事件

a，對象.on事件名=null

// 綁定
document.getElementById('btn1').onclick = function () { console.log('kay'); } document.getElementById('btn2').onclick = function () { // 解綁
    document.getElementById('btn1').onclick = null; }

b，對象.removeEventListener('不帶on的事件名', 函數名, false)

// 命名函數
function f1() { console.log('hello') } // 綁定 document.getElementById('btn1').addEventListener('click', f1, false)
 document.getElementById('btn2').onclick = function () { // 解綁 document.getElementById('btn1').removeEventListener('click', f1, false);
};

addEventListener

c，對象.detachEvent(帶on的事件名, 函數名)

// 命名函數
function f2() { console.log('kay'); } // 綁定
document.getElementById('btn1').attachEvent('onclick', f2); // document.getElementById('btn2').onclick = function () { // 解綁
    document.getElementById('btn1').detachEvent('onclick', f2); };

detachEvent

解決瀏覽器兼容問題：

// 爲任意元素綁定任意事件
function addEventListener(element, type, fn) { // 若是瀏覽器有這個方法，谷歌，火狐
    if (element.addEventListener) { element.addEventListener('click', fn, false); // IE8的
    } else if (element.attachEvent) { element.attachEvent('on' + type, fn); } else { element['on' + type] = null; } } // 兩個命名函數
function f1() { console.log('kay1'); } function f2() { console.log('kay2'); } var btn1 = document.getElementById('btn1'); // 綁定兩個點擊事件
addEventListener(btn1, 'click', f1); addEventListener(btn1, 'click', f2);

綁定多個相同事件

// 爲任意元素解綁事件
function removeEventListener(element, type, fnName) { // 若是瀏覽器有這個方法
    if (element.removeEventListener) { element.removeEventListener(type, fnName, false); } else if (element.detachEvent) { element.detachEvent('on' + type, fnName); } else { element['on' + type] = null; } } // 解綁事件
removeEventListener(btn1, 'click', f2);

解綁事件

事件冒泡：

事件冒泡解釋:
多個元素嵌套,有層次關係,這些元素都註冊了相同的事件,
若是裏面的元素的事件觸發了,
外面的元素的該事件自動的觸發了.

<div id="dv1">
    <div id="dv2">
        <div id="dv3"></div>
    </div>
</div>
    <script>
        // 最外層
        document.getElementById('dv1').onclick = function () { console.log('外層===' + this.id); }; // 第二層
        document.getElementById('dv2').onclick = function () { console.log('第二層===' + this.id); }; // 最裏層
        document.getElementById('dv3').onclick = function () { console.log('最裏層===' + this.id); }; </script>

事件冒泡

阻止事件冒泡：

1，window.event.cancelBubble = true;　　// 谷歌和IE8支持，火狐不支持

2，e.stopPropagation();　　　　// 谷歌和火狐支持，IE8不支持

　　這種使用的是事件處理函數的參數對象.方法()

document.getElementById('dv1').onclick = function () { console.log('外層===' + this.id); }; document.getElementById('dv2').onclick = function () { console.log('第二層===' + this.id); // 阻止事件冒泡第一種 // window.event.cancelBubble = true;
}; // function (參數對象)
document.getElementById('dv3').onclick = function (e) { console.log('最裏層===' + this.id); // 阻止事件冒泡第二種，
 e.stopPropagation(); };

阻止事件冒泡

事件分三個階段：

1捕獲階段　　--- 從外到裏

2目標階段　　

3冒泡階段　　--- 從裏到外

e.eventPhase　　// 調用事件處理程序的階段

// 命名函數
function fn(e) { var current = ''; // 判斷事件處於哪一個階段
    switch (e.eventPhase) { case 1: current = '捕獲階段'; break; case 2: current = '目標階段'; break; case 3: current = '冒泡階段'; break; } console.log(this.id + '===' + current); }

查看當前事件處於哪階段

// 
var dv1 = document.getElementById('dv1'); var dv2 = document.getElementById('dv2'); var dv3 = document.getElementById('dv3'); var objs = [dv1, dv2, dv3]; // 爲數組中每一個元素註冊點擊事件
objs.forEach(function(item) { // true捕獲階段，false冒泡階段
    item.addEventListener('click', fn, false) });

控制捕獲或者冒泡

被點擊的div3就是：目標階段

job:爲同一元素綁定多個不一樣事件，並使用同一個事件處理函數

// 命名函數
function fn(e) { switch(e.type) { case 'click': alert('kay,hellow'); break; case 'mouseover': this.style.backgroundColor = 'hotpink'; break; case 'mouseout': this.style.backgroundColor = 'green'; break; } } var btn = document.getElementById('btn'); // 爲按鈕綁定：點擊，鼠標進入，鼠標離開事件
btn.addEventListener('click', fn, false); btn.addEventListener('mouseover', fn, false); btn.addEventListener('mouseout', fn, false);