JavaScript給每一個(gè)li節(jié)點(diǎn)綁定點(diǎn)擊事件的實(shí)現(xiàn)方法
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é)點(diǎn) var list = document.getElementsByTagName("li"); //給每個(gè)li綁定事件 for(var i = 0;i<list.length;i++){ list[i].onclick = function(){ //彈出對(duì)應(yīng)的li節(jié)點(diǎn)里面的內(nèi)容 alert(this.innerHTML); //將節(jié)點(diǎn)的顏色變成紅色 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é)點(diǎn) var list = document.getElementsByTagName("li"); //給每個(gè)li綁定事件 for(var i = 0;i<list.length;i++){ list[i].ondblclick = function(){ //彈出對(duì)應(yīng)的li節(jié)點(diǎn)里面的內(nèi)容 alert(this.innerHTML); this.style.color = "red"; } } </script> </body>
PS:下面看下js循環(huán)給li綁定參數(shù)不同的點(diǎn)擊事件
<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>
每個(gè)li彈出來(lái)的值都是不同的哦
以上所述是小編給大家介紹的JavaScript給每一個(gè)li節(jié)點(diǎn)綁定點(diǎn)擊事件,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
學(xué)習(xí)使用Bootstrap柵格系統(tǒng)
這篇文章主要教大家學(xué)習(xí)使用Bootstrap柵格系統(tǒng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05javascript頁(yè)面動(dòng)態(tài)顯示時(shí)間變化示例代碼
頁(yè)面動(dòng)態(tài)顯示時(shí)間變化的方法有很多,本文為大家介紹下使用javascript的具體實(shí)現(xiàn),感興趣的朋友不要錯(cuò)過(guò)2013-12-12HTML+JS實(shí)現(xiàn)愛(ài)心動(dòng)畫(huà)效果的源碼分享
最近在熱播影劇《點(diǎn)燃我,溫暖你》中有個(gè)片段是男主人公李峋通過(guò)代碼實(shí)現(xiàn)了一個(gè)愛(ài)心動(dòng)畫(huà)的效果。在本文中,將利用HTML+CSS+JS實(shí)現(xiàn)同款效果,需要的可以嘗試一下2022-11-11深入探討JavaScript中parseInt與Number數(shù)字轉(zhuǎn)換方法的區(qū)別
在Javascript編程中,數(shù)字是一種常見(jiàn)的數(shù)據(jù)類(lèi)型,經(jīng)常需要在不同的情境下進(jìn)行不同類(lèi)型的操作,本文將深入探討parseInt()和Number()的區(qū)別,通過(guò)代碼示例和詳細(xì)解釋,幫助大家更好地理解它們的用途,需要的朋友可以參考下2023-08-08JavaScript電子時(shí)鐘倒計(jì)時(shí)
這篇文章主要介紹了JavaScript電子時(shí)鐘倒計(jì)時(shí)的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-01-01JavaScript實(shí)現(xiàn)與使用發(fā)布/訂閱模式詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)與使用發(fā)布/訂閱模式,較為詳細(xì)的分析了發(fā)布/訂閱模式的概念、原理并結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)與使用發(fā)布/訂閱模式的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01