事件委托（event.target）

Posted 2020-08-31 &nbsp

html部分

<div id="box">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
    <p id="p3">p3</p>
</div>

传统的做法就是如下面一样，给每个p添加一个事件处理程序：

var p1 = document.getElementById(‘p1‘);
p1.onclick = function(){
        alert(‘p1‘);
};
var p2 = document.getElementById(‘p2‘);
p2.onclick = function(){
        alert(‘p2‘);
};
var p3 = document.getElementById(‘p3);
p3.onclick = function(){
        alert(‘p3‘);
};

这样添加单击事件是没有问题的，但是如果在一个复杂的页面里，对所有可单击的元素都采用这种方式的话，那将会有数不清的事件处理程序。而解决的方案是从事件的处理机制方面入手，在这里我们利用事件冒泡。

事件冒泡：事件开始时有具体的元素接收，然后逐级向上传播到较为不具体的元素。

这句话的意思是，当你点击一个元素的时候(假设这个元素有事件)，这个元素的事件会触发，然后这个元素的父元素的事件接着触发。事件会沿着DOM树向上传播，直到document对象。

借助以上特性，我们没有必要给每个元素都添加一个事件处理程序，而是改成事件委托：

var box= document.getElementById(‘box‘);
box.onclick = function(event) {
    var id = event.target.id
    switch(id) {
        case ‘p1‘:
            alert(‘p1‘);
            break;
        case ‘p2‘:
            alert(‘p2‘);
            break;
        case ‘p3‘:
            alert(‘p3‘);
            break;
    }
}

当我们单击p1的时候，p1没有事件，但是单击事件还是会向上传播，从而触发box的单击事件，在事件中通过event.target具体得知单击的是哪个元素，然后获取id进行判断。

使用这种技术的优点：占用内存更少，程序所需时间更少，结构清晰。