Rumah > hujung hadapan web > tutorial js > 关于js 索引下标之li集合绑定点击事件实例分享

关于js 索引下标之li集合绑定点击事件实例分享

小云云
Lepaskan: 2018-01-15 09:20:15
asal
1621 orang telah melayarinya

本文通过一段实例代码给大家讲解了js索引下标之li集合绑定点击事件的相关知识,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家。

下面一段代码给大家介绍li集合绑定点击事件,具体代码如下所示:


//Method-1:
var items = document.getElementsByTagName('li');
  for(var i=0;i<items.length;i++){
    items[i].index = i;
    items[i].onclick = function(){
      this.innerHTML = this.index;
  }
}
//Method-2:
var items = document.getElementsByTagName(&#39;li&#39;);
  for(var i = 0; i<items.length; i++){
    (function(index){
      items[i].onclick = function(){
      this.innerHTML = index;
    }
  })(i)
}
//Method-3:
var items = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0; i<items.length; i++){
  items[i].onclick = function(index){
    return function(){
      this.innerHTML = index;
    }
  }(i)
}
Salin selepas log masuk

相关推荐:

jQuery简单绑定单个事件实例分享

实例讲解jQuery实现html双向绑定功能

实例讲解JavaScript函数绑定用法

Atas ialah kandungan terperinci 关于js 索引下标之li集合绑定点击事件实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan