什么是事件委托:通俗的讲,事件就是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>