事件冒泡 & 事件委托

<一个幼儿园小班的前端的成长随笔,错误与不足之处,望各位大牛批评指点,谢谢!>

事件冒泡

• 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')