1.節點的相關操作

1.1洗掉的方法

節點node的洗掉方法：node.removeChild(nodes),
回顧一下節點的添加方法:node.appendChild(nodes),

1.2復制的操作（克隆）

節點的賦值方法：node.cloneNode();
需要注意的地方：

這里的cloneNode()括號里有兩個值一個false 一個true，如果是false就是代表“淺”克隆，只復制標簽不復制里面的內容

1.3創建元素的三種方式

1.documnet.write()
2.document.innerHTML
3.documnet.createElement()

注意：他們之間是有區別的

document.write是將內容直接寫入內容流，會導致文頁面的重繪
innerHTML是將內容寫入某個DOM節點，不會導致重繪，但是這種是采取字串拼接的，有點復雜
createElemnet()也是創建元素，效率不怎么高，但innerHTML要比createElement高

有沒有一種方式是效率比較高的？有！,使用陣列加innerHTML

  function fn() {
        var d1 = +new Date();
        var array = [];
        for (var i = 0; i < 1000; i++) {
            array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
        }
        document.body.innerHTML = array.join('');
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();

2.DOM的核心知識點

核心知識點，就是一系列的標準編程介面

DOM樹，是比價核心的，通過DOM獲取到的是一個物件，有它的屬性，有它的方法

2.1創建

主要是前面說的三種write，innerHTML，createElement

2.2增，刪，改，查

以下是具體相關操作！

2.3屬性的操作

3.事件的高級操作

3.1什么是事件的注冊（2種

傳統的方式

- 使用on開頭的時間
- 然后給一個函式btn.onclick = function(){}
- 這種方式注冊事件是唯一的，如果后面還有，會發生覆寫

監聽注冊的方式

這就是比較高端的方式了，addEvenListener(),如果是ie9之前，使用attachEvent，
同一個元素可以有多個監聽器，按注冊的順序執行

到底怎么使用呢？都有些什么注意事項呢？

//公式 把監聽器放在eventTarget上面
eventTarget.addEventListener(Type,Listener[,userCapture])
//引數說明》
type:事件型別的字串，比如click ，這里不需要帶有on
listener：事件的處理函式，事件發生的時候會呼叫
userCapture：是一個布林值，可選引數，默認是false與事件流有關


?eventTarget.attachEvent(eventNameWithON，callback)方法將指定的監聽器注冊到 eventTarget（目標物件） 上，當該物件觸發指定的事件時，指定的回呼函式就會被執行，
這里的時間需要指定on ，

3.2事件的監聽以及兼容性的處理

對于事件的兼容性，我們可以直接封裝一個函式去處理

3.2洗掉事件

同樣的這也有兩種方式，一個是傳統的一個是事件監聽的，

evemtTarget.onclick = null;

eventTarget.removeEventListener(Type,Listener[,userCapture])
?eventTarget.detachEvent(eventNameWithON，callback)

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
            // 1. 傳統方式洗掉事件
            divs[0].onclick = null;
        }
        // 2. removeEventListener 洗掉事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要呼叫加小括號
        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>

同樣的對于兼容性的處理，我們也可以使用兼容性的封裝函式

3.3DOM事件流

所謂的事件流指的是從頁面中接受到事件的順序，

我們的事件狀態一共與三種捕獲狀態——>當前目標階段——>冒泡階段

js在執行代碼的時候，只能執行其中的捕獲或者冒泡階段，
onclick還有attachEvent只能得到冒泡，
對于另外的一個系結事件的函式，第三個值userCapture前面的值，默認是false表示是在冒泡階段呼叫處理程式，如果是true就是在捕獲的時候執行，

以下的時間是沒有冒泡的，onblur，onfocus，onmouseenter,onmouseleave
事件冒泡

    <div >
        <div >son盒子</div>
    </div>
    <script>
        // onclick 和 attachEvent（ie） 在冒泡階段觸發
        // 冒泡階段 如果addEventListener 第三個引數是 false 或者 省略 
        // son -> father ->body -> html -> document
        var son = document.querySelector('.son');
		// 給son注冊單擊事件
        son.addEventListener('click', function() {
            alert('son');
        }, false);
		// 給father注冊單擊事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
		// 給document注冊單擊事件，省略第3個引數
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

事件捕獲

    <div >
        <div >son盒子</div>
    </div>
    <script>
        // 如果addEventListener() 第三個引數是 true 那么在捕獲階段觸發
        // document -> html -> body -> father -> son
         var son = document.querySelector('.son');
		// 給son注冊單擊事件，第3個引數為true
         son.addEventListener('click', function() {
             alert('son');
         }, true);
         var father = document.querySelector('.father');
		// 給father注冊單擊事件，第3個引數為true
         father.addEventListener('click', function() {
             alert('father');
         }, true);
		// 給document注冊單擊事件，第3個引數為true
        document.addEventListener('click', function() {
            alert('document');
        }, true)
    </script>

4.事件物件

事件發生后，跟事件相關的一系列資訊資料的集合都放到這個物件里面，這個物件就是事件物件，

4.1事件物件的使用

在事件處理函式中宣告1個形參用來接收事件物件，這個形參就是e ，function(e)
它的兼容性問題,在window.event中獲取查找，e = e || window.event;

只要“||”前面為false, 不管“||”后面是true 還是 false，都回傳 “||” 后面的值，
只要“||”前面為true, 不管“||”后面是true 還是 false，都回傳 “||” 前面的值，

    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // 事件物件
                e = e || window.event;
                console.log(e);
        }
    </script>

4.2事件的屬性和方法

e.target 和 this 的區別

this 是事件系結的元素（系結這個事件處理函式的元素），
e.target 是事件觸發的元素，

常情況下terget 和 this是一致的，
但有一種情況不同，那就是在事件冒泡時（父子元素有相同事件，單擊子元素，父元素的事件處理函式也會被觸發執行），
	這時候this指向的是父元素，因為它是系結事件的元素物件，
	而target指向的是子元素，因為他是觸發事件的那個具體元素物件，

    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            // e.target 和 this指向的都是div
            console.log(e.target);
            console.log(this);

        });
    </script>

事件冒泡下的e.target和this

    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
              // 我們給ul 系結了事件  那么this 就指向ul  
              console.log(this); // ul

              // e.target 觸發了事件的物件 我們點擊的是li e.target 指向的就是li
              console.log(e.target); // li
        });
    </script>

4.1阻止默認行為

html中一些標簽有默認行為，例如a標簽被單擊后，默認會進行頁面跳轉，

    <a href="http://www.baidu.com">百度</a>
    <script>
        // 2. 阻止默認行為 讓鏈接不跳轉 
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
             e.preventDefault(); //  dom 標準寫法
        });
        // 3. 傳統的注冊方式
        a.onclick = function(e) {
            // 普通瀏覽器 e.preventDefault();  方法
            e.preventDefault();
            // 低版本瀏覽器 ie678  returnValue  屬性
            e.returnValue = https://www.cnblogs.com/BM-laoli/p/false;
            // 我們可以利用return false 也能阻止默認行為 沒有兼容性問題
            return false;
        }
    </script>

4.2阻止事件冒泡

e.stopPropagation()

e.canceBubble = true;

    <div >
        <div >son兒子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
		// 給son注冊單擊事件
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 傳播
            window.event.cancelBubble = true; // 非標準 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
		// 給father注冊單擊事件
        father.addEventListener('click', function() {
            alert('father');
        }, false);
		// 給document注冊單擊事件
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

同樣的這里也有兼容性的處理方法

if(e && e.stopPropagation{
    e.stopPropagation()
}else{
    windows.evet.canceBubble  = true;
}

4.3事件委托（原理還有作用）

說白了就是，不給子元素注冊事件，給父元素注冊事件，把處理代碼在父元素的事件中執行，

委托的原理：利用了冒泡
? ：給父元素注冊事件，利用事件冒泡，當子元素的事件觸發，會冒泡到父元素，然后去控制相應的子元素，這么做，可以提高一些性能

我們只操作了一次 DOM ，提高了程式的性能，
動態新創建的子元素，也擁有事件，

    <ul>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：給父節點添加偵聽器， 利用事件冒泡影響每一個子節點
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // e.target 這個可以得到我們點擊的物件
            e.target.style.backgroundColor = 'pink';
        })
    </script>

5.常見的滑鼠事件——一覽表

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/144322.html

標籤：JavaScript

上一篇：VUE實作Studio管理后臺（七）：樹形結構，檔案樹，節點樹共用一套代碼NodeTree

下一篇：Mongodb 插入資料的方式

JavaScript——節點操作，DOM核心，事件監聽