Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Javascript动态绑定事件的简单实现代码_javascript技巧

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

WBOY
Release： 2016-05-16 18:13:23
Original
1110 people have browsed it

下面是页面的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事件对应的处理函数中。
Related labels：
动态绑定事件
source：php.cn
Previous article：javascript中使用replaceAll()函数实现字符替换的方法_javascript技巧 Next article：The impact of removing s.gif in extjs_extjs
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Forced refresh is a consequence of accessing undefined paths or error pages in Next.js Accessing an undefined path or error page causes Next.js to do a hard refresh, causing my ...
From 2024-04-05 08:32:46
0
1
400
How to trigger the in-focus state of a button when another button is focused or has focus? View Reference When a (button) library name is selected or clicked, I want the next inacti...
From 2024-04-02 16:49:31
0
1
336
Update fields in AJAX POST request I'm trying to dynamically update a custom field in an AJAXPOST request using jQuery or Jav...
From 2024-04-02 11:45:41
0
1
360
Simplify video playback in emails: ensure instant playback, no download screen required I'm not sure "which wall to lean the ladder against" here, or even the correct t...
From 2024-03-30 17:12:51
0
1
433
Is there a seamless way to combine custom and native props in a REACT TS component wrapper? I have several components that extend the native functionality of inputs, buttons, forms, ...
From 2024-03-30 17:01:40
0
1
346
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template