實(shí)現(xiàn)點(diǎn)擊列表彈出列表索引的兩種方式
更新時(shí)間：2013年03月08日 11:30:41 作者：
使用利用事件冒泡委托給列表的父節(jié)點(diǎn)去處理的方式第二種方式就是使用閉包了，感興趣的你可以參考下本文，或許對(duì)你學(xué)習(xí)js有所幫助
方式一，使用利用事件冒泡委托給列表的父節(jié)點(diǎn)去處理的方式：
var ulObj = document.getElementById("myUl");
ulObj.onclick = function (event) {
var tg = event.target;
var liArray = ulObj.getElementsByTagName("li");
for (var i = 0; i < liArray.length; i++) {
if (liArray[i] === tg) {
alert(i + 1);
}
}
}
方式二，使用閉包：
var liArray = document.getElementById("myUl").getElementsByTagName("li");
for (var i = 0; i < liArray.length; i++) {
(function () {
var n = i;
liArray[i].onclick = function () {
alert(n + 1);
}
})(i)
}
HTML代碼：
<ul id='myUl'>
<li>haha</li>
<li>heihei</li>
<li>hehe</li>
<li>gaga</li>
</ul>
復(fù)制代碼 代碼如下:
var ulObj = document.getElementById("myUl");
ulObj.onclick = function (event) {
var tg = event.target;
var liArray = ulObj.getElementsByTagName("li");
for (var i = 0; i < liArray.length; i++) {
if (liArray[i] === tg) {
alert(i + 1);
}
}
}
方式二，使用閉包：
復(fù)制代碼 代碼如下:
var liArray = document.getElementById("myUl").getElementsByTagName("li");
for (var i = 0; i < liArray.length; i++) {
(function () {
var n = i;
liArray[i].onclick = function () {
alert(n + 1);
}
})(i)
}
HTML代碼：
復(fù)制代碼 代碼如下:
<ul id='myUl'>
<li>haha</li>
<li>heihei</li>
<li>hehe</li>
<li>gaga</li>
</ul>
相關(guān)文章
Javascript模塊化機(jī)制實(shí)現(xiàn)原理詳解
這篇文章主要介紹了Javascript模塊化機(jī)制實(shí)現(xiàn)原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
關(guān)于ligerui子頁(yè)面關(guān)閉后,父頁(yè)面刷新,重新加載的方法
今天小編就為大家分享一篇關(guān)于ligerui子頁(yè)面關(guān)閉后,父頁(yè)面刷新,重新加載的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JS的IE和Firefox兼容性集錦...2006-12-12
這篇文章主要介紹了高性能JavaScript 重排與重繪,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序map地圖使用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
js canvas實(shí)現(xiàn)擦除效果示例代碼
擦除效果在我們?nèi)粘ｉ_(kāi)發(fā)中也是時(shí)有見(jiàn)到的，通過(guò)擦除效果大大加強(qiáng)了與用戶(hù)的交互性，所以下面這篇文章主要給大家介紹了利用js和canvas實(shí)現(xiàn)擦除效果的相關(guān)資料，文中給出了詳細(xì)的介紹和示例代碼，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-04-04
JavaScript實(shí)現(xiàn)刷新不重記的倒計(jì)時(shí)
網(wǎng)上關(guān)于JavaScript實(shí)現(xiàn)倒計(jì)時(shí)的文章有很多，但是一般都是刷新后會(huì)重新開(kāi)始計(jì)時(shí)，可是我們有的時(shí)候會(huì)需要刷新卻不重新計(jì)算的倒計(jì)時(shí)，這該怎么做呢？下面我們一起來(lái)看看這種倒計(jì)時(shí)怎么實(shí)現(xiàn)吧。2016-08-08
JavaScript實(shí)現(xiàn)簡(jiǎn)單的樹(shù)形菜單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的樹(shù)形菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript使用箭頭函數(shù)實(shí)現(xiàn)優(yōu)化代碼
在JavaScript的編程世界里,我們時(shí)常被普通函數(shù)的冗長(zhǎng)寫(xiě)法所困擾,每次都需要寫(xiě)function關(guān)鍵字,有時(shí)候還要明確地寫(xiě)return語(yǔ)句,下面我們就來(lái)看看如何利用箭頭函數(shù)優(yōu)化這些繁瑣的代碼吧2023-11-11
js前端存儲(chǔ)之sessionStorage使用方法舉例
sessionStorage是指本地存儲(chǔ)一個(gè)會(huì)話中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷(xiāo)毀,這篇文章主要給大家介紹了關(guān)于js前端存儲(chǔ)之sessionStorage使用方法的相關(guān)資料,需要的朋友可以參考下2024-06-06