Event

Event

target 和 currentTarget

  • target:哪个元素触发了事件?
  • currentTarget:哪个元素监听了这个事件

事件代理/委托

原因

添加的事件监听器数量,影响页面的整体运行性能,因为访问 DOM 的次数越多,引起浏览器的重绘和重排的次数也就越多。通过事件委托,可以减少添加的事件监听器数量,提高页面性能。

原理

利用事件冒泡

示例

<ul id="list">
	<li id="item1">item1</li>
	<li id="item2">item2</li>
	<li id="item3">item3</li>
	<li id="item4">item4</li>
</ul>

目的:点击 li 然后弹出这个 li 的内容:

window.onload=function(){
  var ulNode=document.getElementById("list");
  ulNode.addEventListener('click',function(e){
       if(e.target && e.target.nodeName.toUpperCase() == "LI"){/*判断目标事件是否为li*/
         alert(e.target.innerHTML);
       }
     },false);
};