JS 事件委托是什么

事件对象

每个事件处理函数中，都可以有一个形参（IE中这个形参无效），系统会自动传递一个事件对象到函数中，这个对象的每个属性都代表事件被触发时的一些关键性数据

IE浏览器中用window.event来记录触发事件时的关键数据

所以我们如果希望拿到一个事件触发后的事件对象，需要用一种兼容性的写法

div.onclick = function(e){
	var event = e || window.event;
	console.log(event);
}

事件源对象

事件源对象是事件对象里面的一部分,表示的是真正触发事件的那个对象

<div class="wrapper">
  <div class="box"></div>
</div>
<script>
var wrapper = document.getElementsByClassName('wrapper')[0];
var box = document.getElementsByClassName('box')[0];
wrapper.onclick = function(e){
  var event = e || window.event;
  console.log(event);
}
</script>

当点击橘色方块时，会触发点击事件，真正触发事件的事件源对象为橘色方块
当点击粉色方块时，事件冒泡到父级橘色方块，也会触发点击事件，真正触发事件的事件源对象为粉色方块

在一个事件触发后的事件对象中有以下属性，表明事件源对象

• event.target 火狐只有这个 没得下面那个
• event.srcElement IE只有这个 没得上面那个
  Chrome这俩都有

点击橘色方块后，输出事件对象的target和srcElement属性

点击粉色方块后，输出事件对象的target和srcElement属性

我们如果希望拿到一个事件触发后的事件源对象，需要用一种兼容性的写法

div.onclick = function(e){
	var target= e.target || e.srcElement;
	console.log(target);
}

事件委托

把事件绑定到事件源对象的祖先元素上,利用事件冒泡原理触发事件

例题：实现点击不同的li输出其中的内容

将li的点击事件委托给父级ul

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e){
  var event = e || window.event;
  var target= event.target || event.srcElement;
  console.log(target.innerText);
}
</script>

优点：

• 性能 不需要循环所有的元素一个个绑定事件
• 灵活 当有新的子元素时不需要重新绑定事件