事件处理程序的性能与优化
事件处理程序太多了,会带来一些问题的,首先,事件处理函数写多了,会占据内存,其次,这些处理函数导致DOM的访问次数增加,这样子会延迟整个页面的就绪时间
所以,我们可以用事件委托的办法,来解决这些问题
前面已经讲过事件冒泡了,事件委托就是利用了这一点
举个例子
<div id="div1"> <p id="p1">激活</p> <p id="p2">取消</p> <p id="p3">取消</p> <p id="p4">取消</p> </div> <div id="div2"> <p id="p5">取消</p> <p id="p6">取消</p> </div>
现在我们要实现的功能是,当我点击”激活“的时候,弹出”激活“,点击”取消“的时候,弹出”取消“。
当然,我们不能在每一个p标签上面添加事件,所以我们就要用到事件委托
var p1=document.getElementById('p1') p1.addEventListener('click',function(event){ event.stopPropagation() alert("激活") }) document.body.addEventListener('click',function(){ alert("取消") })
我们在p1上面添加了一个事件,在body上面添加了一个事件。
当我们点击其中的某一个”取消“的时候,由于冒泡的原因,会出发body上面的事件,因此,弹出了”取消“
由于事件冒泡的存在,p1不需要触发body上面注册的事件,因此我们取消了事件冒泡
再看一个例子
<div id="div"> <p id="p1">p1</p> <p id="p2">p2</p> <p id="p3">p3</p> <p id="p4">p4</p> </div> <script type="text/javascript"> var div = document.getElementById('div') div.addEventListener('click', function(event) { var target=event.target alert(target.innerHTML) })
这样子,点击每一个p的时候,就会弹出他的内容