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进行判断。
使用这种技术的优点:占用内存更少,程序所需时间更少,结构清晰。