事件冒泡 & 事件委託

<一個幼兒園小班的前端的成長隨筆,錯誤與不足之處,望各位大牛批評指點,謝謝!>

事件冒泡

• DOM事件流: HTML元素產生一個事件時, 該事件在該元素節點與根節點之間的路徑傳播的過程, 在此過程當中,全部節點都會收到此事件

 

• DOM事件流三個階段:

1. 事件捕獲階段:事件由document逐級向下,由外向內
   
2. 目標階段:
3. 事件冒泡階段: 事件由目標節點逐級向上,由內向外

 

• 添加事件 & 刪除事件

-> addEventListener() && remove Event Listener()
    -> 參數一: 要處理的事件
    -> 參數二: 事件處理的函數
    -> 參數三: 布爾值
　　　　　　　　　　默認false -> 事件冒泡階段[目的: 最大限度的兼容各個瀏覽器]
　　　　　　　　　　修改true  -> 事件捕獲階段

 

排序

// 1. 冒泡排序
<script>
    function sort(arr) {
        for (var i = 0; i < arr.length - 1; i++) {
            for (var j = 0; j < arr.length - i - 1; j++) {
                if (arr[j] > arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
                }
            }
        }
        return arr;
    }
    var arr1 = sort([1, 4, 2, 9]);
    console.log(arr1);
    var arr2 = sort([11, 7, 22, 999]);
    console.log(arr2);
</script>

 

// 2. 選擇排序
<script>
    var arr = [10, 6, 18, 33, 2, 17];
    // 執行思路:
    // 1. 先假設數組的第一個元素最小,而後取找後面的元素有沒有比它更小的,
            // -> 若是有, 記錄它的下標,找到後將他們兩的位置交換
    // 2. 接下來 認爲數組的第二個數字最小, 而後取找後面的元素有沒有比它更小的,
            // -> 若是有, 記錄它的下標,找到後將他們兩的位置交換
    // ...依次類推
    for (var i = 0; i < arr.length - 1; i++) {
        var arrMin = i;
        for (var j = 1 + i; j < arr.length; j++) {
            if (arr[arrMin] > arr[j]) {
                    arrMin = j;
            }
        }
        // 交換位置
        var temp = arr[i];
        arr[i] = arr[arrMin];
        arr[arrMin] = temp;
    }
console.log(arr); //  [2, 6, 10, 17, 18, 33]
</script>

 

事件委託

// 1. 原生js事件委託原理: 給父節點添加偵聽器, 利用事件冒泡影響每個子節點
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
    // e.target 這個能夠獲得咱們點擊的對象
    e.target.style.backgroundColor = 'pink';
})


// 2. jquery事件委派
$("ul").on("click", "li", function(e) {
        console.log(11);
          // 此時裏面的e.target  和 this 同樣
});

 

1. 利用事件冒泡的原理, 讓子元素所觸發的事件, 讓其父元素代替執行
2. 能夠大量節省內存佔用, 減小事件註冊, 提升網頁性能
3. 動態生成的元素綁定事件

 

排他算法

// 1. 原生js排他: 
// -> 先幹掉全部人的樣式,
// -> 再給本身添加樣式
for(var i = 0; i < dom.length; i++){
      dom[i].style.color = '';
}
this.style.color = 'red';



// 2. jquery排他: 
// 給其餘兄弟移除類,給本身添加類
// 隱式迭代 + 鏈式編程
$(this).addClass('active').siblings('a').removeClass('active')