JavaScript給每一個li節(jié)點綁定點擊事件的實現(xiàn)方法
更新時間:2016年12月01日 15:20:18 作者:拽是男人的本性
這篇文章主要介紹了JavaScript給每一個li節(jié)點綁定點擊事件的實現(xiàn)方法,包括js循環(huán)給li綁定參數(shù)不同的點擊事件,需要的朋友可以參考下
1.單擊事件
<body> <h2>javascript 事件</h2> <ul> <li>aaaa</li> <li>aaaa111</li> <li>aaaa222</li> <li>aaaa3333</li> <li>aaaa444</li> </ul> <script type="text/javascript"> //獲取所有l(wèi)i的節(jié)點 var list = document.getElementsByTagName("li"); //給每個li綁定事件 for(var i = 0;i<list.length;i++){ list[i].onclick = function(){ //彈出對應的li節(jié)點里面的內(nèi)容 alert(this.innerHTML); //將節(jié)點的顏色變成紅色 this.style.color = "red"; } } </script> </body>
2.雙擊事件
<body> <h2>javascript 事件</h2> <ul> <li>aaaa</li> <li>aaaa111</li> <li>aaaa222</li> <li>aaaa3333</li> <li>aaaa444</li> </ul> <script type="text/javascript"> //獲取所有l(wèi)i的節(jié)點 var list = document.getElementsByTagName("li"); //給每個li綁定事件 for(var i = 0;i<list.length;i++){ list[i].ondblclick = function(){ //彈出對應的li節(jié)點里面的內(nèi)容 alert(this.innerHTML); this.style.color = "red"; } } </script> </body>
PS:下面看下js循環(huán)給li綁定參數(shù)不同的點擊事件
<li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script type="text/javascript"> var li=document.getElementsByTagName_r("li"); for(var i=0;i<li.length;i++){ (function(x){ li[x].onclick=function(){alert(x);} })(i); } </script>
每個li彈出來的值都是不同的哦
以上所述是小編給大家介紹的JavaScript給每一個li節(jié)點綁定點擊事件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
深入探討JavaScript中parseInt與Number數(shù)字轉(zhuǎn)換方法的區(qū)別
在Javascript編程中,數(shù)字是一種常見的數(shù)據(jù)類型,經(jīng)常需要在不同的情境下進行不同類型的操作,本文將深入探討parseInt()和Number()的區(qū)別,通過代碼示例和詳細解釋,幫助大家更好地理解它們的用途,需要的朋友可以參考下2023-08-08JavaScript實現(xiàn)與使用發(fā)布/訂閱模式詳解
這篇文章主要介紹了JavaScript實現(xiàn)與使用發(fā)布/訂閱模式,較為詳細的分析了發(fā)布/訂閱模式的概念、原理并結(jié)合實例形式分析了javascript實現(xiàn)與使用發(fā)布/訂閱模式的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01