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(){
//彈出對應(yīng)的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(){
//彈出對應(yīng)的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é)點綁定點擊事件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JavaScript使用DeviceOne開發(fā)實戰(zhàn)（二）生成調(diào)試安裝包
這篇文章主要介紹了JavaScript使用DeviceOne開發(fā)實戰(zhàn)（二）生成調(diào)試安裝包的相關(guān)資料,需要的朋友可以參考下
2015-12-12
小程序如何在不同設(shè)備上自適應(yīng)生成海報的實現(xiàn)方法
這篇文章主要介紹了小程序如何在不同設(shè)備上自適應(yīng)生成海報的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
axios處理重復(fù)請求的方法小結(jié)
這篇文章主要為大家詳細介紹了如何使用發(fā)布訂閱者模式來處理重復(fù)的axios請求,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
js控制div彈出層實現(xiàn)方法
這篇文章主要介紹了js控制div彈出層實現(xiàn)方法,可實現(xiàn)點擊鏈接彈出div浮動層,且背景色變暗的效果,是一款非常實用的特效源碼,需要的朋友可以參考下
2015-05-05
JavaScript DOM事件(筆記)
這篇文章主要介紹了JavaScript DOM事件(筆記) ,需要的朋友可以參考下
2015-04-04
js按指定格式顯示日期時間的樣式代碼
按指定格式顯示日期時間在開發(fā)與時間相關(guān)的應(yīng)用時非常有用，接下來與大家分享下格式化顯示日期時間的方法，感興趣的朋友可以參考下哈
2013-04-04
silverlight線程與基于事件驅(qū)動javascript引擎（實現(xiàn)軌跡回放功能）
前一段時間一直在重構(gòu)工作站軌跡回放功能,一開始我覺得很簡單,但是后面引發(fā)了一系列奇怪的問題,讓我很疼,所以不得不寫個總結(jié)加深記憶,
2011-08-08
前端常用的js函數(shù)方法
這篇文章主要給大家分享的是常用的js函數(shù)的方法，告別搜索引擎的幫助，提高你的開發(fā)效率，,需要的朋友可以參考一下，希望對你的學(xué)習(xí)有所幫助
2021-12-12
深入理解JavaScript系列（31）：設(shè)計模式之代理模式詳解
這篇文章主要介紹了深入理解JavaScript系列（31）：設(shè)計模式之代理模式詳解,代理模式使得代理對象控制具體對象的引用,代理幾乎可以是任何對象：文件,資源,內(nèi)存中的對象,或者是一些難以復(fù)制的東西,需要的朋友可以參考下
2015-03-03
JS中移除非數(shù)字最多保留一位小數(shù)
這篇文章主要介紹了JS中移除非數(shù)字最多保留一位小數(shù)的實現(xiàn)代碼，文章給大家提到了js處理數(shù)字保留2位小數(shù),強制保留2位小數(shù)不夠補上.00的完整代碼，感興趣的朋友一起看看吧
2018-05-05