事件委托
2016-09-21 本文已影响0人
greenlift
什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。
好处呢：1，提高性能。
好处2，新添加的元素还会有之前的事件。
这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。
ie：window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
下面是简单实例:
<style>
li{
width: 80px;
height: 40px;
background: #eee;
margin-top: 20px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// 获取已存在所有li元素
var lis = document.querySelectorAll('li');
// 获取li父级元素 （始终存在的元素）;
var ul = document.querySelector('ul');
// 给始终存在的元素（也就是li的父级元素）添加点击事件
ul.onclick = function(event){
// 通过事件去触发target（目标元素）
var target = event.target;
// 判断目标元素是否等于我们想要添加事件的元素，是就执行
if(target.nodeName == 'LI'){
alert(target.innerHTML);
}
}
// 通过DOM节点新添加的元素也可以触发ul的target
newLi = document.createElement('li');
newLi.innerHTML = '6';
ul.appendChild(newLi);
newLi = document.createElement('li');
newLi.innerHTML = '7';
ul.appendChild(newLi);
</script>
</body>
