事件委托,就是利用了事件冒泡的机制,在较上层位置的元素上添加一个事件监听函数,来管理该元素及其所有子孙元素上的某一类的所有事件。
适用场景:在绑定大量事件的时候,可以选择事件委托
优点
-事件委托可以减少事件注册数量,节省内存占⽤!
-当新增⼦元素时,⽆需再次做事件绑定,因此非常适合动态添加元素
示例
<ul id="list">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<script type="text/javascript">
// ⽗元素
var list = document.getElementById('list');
// 为⽗元素绑定事件,委托管理它的所有⼦元素的点击事件
list.onclick = function (event) {
var currentTarget = event.target;
if (currentTarget.tagName.toLowerCase() === 'li') {
alert(currentTarget.innerText)
}
}
</script>
例**点击ul下面的li,弹出当前li的index
**
使用闭包
var ul = document.getElementsByTagName("ul")[0];
var list = ul.getElementsByTagName("li");
function foo(){
for(var i = 0, len = list.length; i < len; i++){
var that = list[i];
list[i].onclick = (function(k){
var info = that.innerHTML;
return function(){
alert(k + "----" + info);
};
})(i);
}
}
foo();
使用事件代理
var ul = document.querySelector('ul'); var list = document.querySelectorAll('ul li');
ul.addEventListener('click', function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElemnt;
for(var i = 0, len = list.length; i < len; i++){
if(list[i] == target){
alert(i + "----" + target.innerHTML);
}
}
});
引入jQuery,使用其中的on或delegate进行事件绑定(它们都有事件代理的特性)
// delegate方法
$("ul").delegate("li", "click", function(){
var index = $(this).index();
var info = $(this).html();
alert(index + "----" + info);
});
// on方法
$("ul").on("click", "li", function(){
var index = $(this).index();
var info = $(this).html();
alert(index + "----" + info);
});
使用ES6中的新特性let来声明变量
var ul = document.getElementsByTagName("ul")[0]; var list = ul.getElementsByTagName("li");
function foo(){'use strict'
for(let i = 0, len = list.length; i < len; i++){
list[i].onclick = function(){
alert(i + "----" + this.innerHTML);
}
}
}
foo();
用let来声明的变量将具有块级作用域(可以理解{}作为块级作用域的切割符号),很明显可以达到要求,不过需要注意的是得加个’use strict’(使用严格模式)才会生效。
使用jquery,可以用$(this).index()来取到li的index;