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