masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Javascript动态绑定事件的简单实现代码_javascript技巧

Javascript动态绑定事件的简单实现代码_javascript技巧

WBOY
Lepaskan： 2016-05-16 18:13:23
asal
1110 orang telah melayarinya

下面是页面的dom结构

复制代码 代码如下:


  • One

  • Two

  • Three

  • Four



下面是javascript代码
复制代码 代码如下:

//根据ID获取对象
function id(v) { return document.getElementById(v); }

//根据标记获取对象
function tag(element, t) { return element.getElementsByTagName(t); }

window.onload = function() {
//获取test下的所有li对象
var li = tag(id("test"), "li");

//用循环绑定鼠标单击事件
for(var i=0; ili[i].onclick = function() {
//期望弹出1,2,3,4
//结果弹出的总是5
alert("你点击了第" + (i+1) + "项");
}
}
}

为什么会出现上边的现像呢？原因是“for中的事件绑定并没有马上得到执行”。修改后的代码如下：
复制代码 代码如下:

//根据ID获取对象
function id(v) { return document.getElementById(v); }

//根据标记获取对象
function tag(element, t) { return element.getElementsByTagName(t); }

window.onload = function() {
//获取test下的所有li对象
var li = tag(id("test"), "li");

//用循环绑定鼠标单击事件
for(var i=0; i(function() {
var t = i
li[i].onclick = function() {
alert("你点击了第" + t + "项");
}
})();
}
}

测试代码，一切OK，我们正常的将循环变量i传到onclick事件对应的处理函数中。
Label berkaitan：
动态绑定事件
sumber：php.cn
Artikel sebelumnya：javascript中使用replaceAll()函数实现字符替换的方法_javascript技巧 Artikel seterusnya：extjs之去除s.gif的影响_extjs
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Muat semula paksa adalah akibat daripada mengakses laluan tidak ditentukan atau halaman ralat dalam Next.js Mengakses laluan atau halaman ralat yang tidak ditentukan menyebabkan Next.js melakukan mu...
daripada 2024-04-05 08:32:46
0
1
400
Bagaimana untuk mencetuskan keadaan dalam fokus butang apabila butang lain difokuskan atau mempunyai fokus? Lihat Rujukan Apabila nama perpustakaan (butang) dipilih atau diklik, saya mahu butang tid...
daripada 2024-04-02 16:49:31
0
1
336
Kemas kini medan dalam permintaan AJAX POST Saya cuba mengemas kini medan tersuai secara dinamik dalam permintaan AJAXPOST menggunakan...
daripada 2024-04-02 11:45:41
0
1
360
Permudahkan main balik video dalam e-mel: pastikan main balik segera, tiada skrin muat turun diperlukan Saya tidak pasti "dinding mana untuk bersandar pada tangga" di sini, atau pun is...
daripada 2024-03-30 17:12:51
0
1
433
Adakah terdapat cara yang lancar untuk menggabungkan prop tersuai dan asli dalam pembalut komponen REACT TS? Saya mempunyai beberapa komponen yang memanjangkan kefungsian asli input, butang, borang, ...
daripada 2024-03-30 17:01:40
0
1
346
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan