使用事件委托在ul下获取li的索引

最编程 2024-08-07 14:08:50

...

事件委托，就是利用了事件冒泡的机制，在较上层位置的元素上添加一个事件监听函数，来管理该元素及其所有子孙元素上的某一类的所有事件。

适用场景：在绑定大量事件的时候，可以选择事件委托
优点
-事件委托可以减少事件注册数量，节省内存占⽤!
-当新增⼦元素时，⽆需再次做事件绑定，因此非常适合动态添加元素

示例

<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；

上一篇：实例演示：如何在C#中运用委托和事件

下一篇：实战解析：用原生JS如何巧妙实现事件委托