js事件流与事件委托/事件代理

1 事件流

事件流分为两步，一是捕获，二是冒泡

1.1 捕获概念

捕获就是从最高层一层一层往下找到最内部的节点

1.2 冒泡概念

捕获到最小节点后，一层一层往上返回，像是气泡从最底部往上冒一样，由于水深不同压强不同，同样多的气体越往上冒气泡越大，就像在html里越往上走“辈分”越大一样，所以比喻成冒泡

1.3 事件默认触发是在捕获阶段还是冒泡阶段？

默认是冒泡阶段
考虑如下层级

<div class="grandpa">
    <div class="father">
        <div class="son"></div>
    </div>
</div>

为这三个div添加事件

const grandpa = document.querySelector(".grandpa");
const father = document.querySelector(".father");
const son = document.querySelector(".son");

grandpa.onclick = function() {
    console.log('grandpa');
}
father.onclick = function() {
    console.log('father');
}
son.onclick = function() {
    console.log('son');
}

添加样式：

*{
	margin: 0;
	padding: 0;
}
.grandpa {
   	margin: 200px auto;
}

.grandpa {
	width: 400px;
	height: 400px;
	background-color: blue;
}
.father {
	width: 300px;
	height: 300px;
	background-color: skyblue;
}
.son {
	width: 200px;
	height: 200px;
	background-color: pink;
}

考虑点击粉色区域时， 输出顺序是什么？点此跳转查看上述案例

son
father
grandpa

如果是捕获时触发事件，则顺序应当相反

1.4 阻止冒泡

son.onclick = function(event) {
  	console.log('son');
    event.stopPropagation();
}

如上代码, 事件会默认向函数里传入一个event事件, 调用event.stopPropagation();事件即可在当前位置阻止冒泡
这样点击son的显示区域时只会输出son

如果想要在点击son的区域时, 只将冒泡传递到father, 即触发father但是不触发grandpa的onclick事件, 可以如下操作:

const grandpa = document.querySelector(".grandpa");
const father = document.querySelector(".father");
const son = document.querySelector(".son");

grandpa.onclick = function() {
    console.log('grandpa');
}
father.onclick = function(event) {
    console.log('father');
    event.stopPropagation();
}
son.onclick = function() {
    console.log('son');
}

2 事件委托/事件代理

事件委托, 又称事件代理
顾名思义, 事件委托, 肯定是把事件委托到别处.
冒泡时触发事件, 那肯定是往上委托
也就是说, 将当前节点的事件交给该节点往上冒泡可达的先辈节点处理

这么说还是有点模糊, 准确来说, 就是son节点不绑定onclick事件, 而是等click事件冒泡到father身上, 在father身上绑定onclick事件, 在father的onclick事件中获取并处理被点击的son

事件冒泡时会将当前节点作为event事件的一个属性target传入, 也就是说相当于event.target = document.getElementById('son')传入了father的onclick事件中

2.1 事件委托的好处

考虑下面例子

<ul class="father">
    <li class="son">1</li>
    <li class="son">2</li>
    <li class="son">3</li>
    <li class="son">4</li>
</ul>

当点击不同li的时候, 想要触发不同的事件, 例如输出1/2/3/4

传统实现逻辑如下:

const sons = document.querySelectorAll('.son');

for(const i = 0; i < sons.length; i++) {
    sons[i].onclick = function() {
        console.log(i);
    }
}

如果页面内容非常多, 例如这里有1000个<li>标签, 那么就需要添加1000次onclick函数, 十分麻烦
这种情况我们可以将事件委托给父元素.
这里需要用到 event.target

不妨试试对class为father的ul添加onclick事件, 输出event, 并点击li所在的区域, 查看event.target输出的是什么

const father = document.querySelector('.father');
father.onclick = function(event) {
    console.log(event.target);
}

我们点击第四个li:

可见, 在父元素ul上添加onclick事件, 点击子元素时, 冒泡时会将该子元素传递给过来
据此我们可以对子元素进行处理, 这样我们只在ul上绑定了事件, 就可以处理该ul下所有的li
点击尝试

const father = document.querySelector('.father');
father.onclick = function(event) {
    console.log(event.target.innerText);
    // 或者一些对点击的li的其他操作
}