时间:2021-05-26
下面是页面的dom结构
复制代码 代码如下:
<ul id="test">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
下面是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; i<li.length; i++) {
li[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<li.length; i++) {
(function() {
var t = i
li[i].onclick = function() {
alert("你点击了第" + t + "项");
}
})();
}
}
测试代码,一切OK,我们正常的将循环变量i传到onclick事件对应的处理函数中。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
方法一:利用javascript的onfocus事件,实现如下:Html代码复制代码代码如下:设计蜂巢如果引入了jQuery框架则可以利用它的事件绑定机制:Js
微信小程序向左滑动删除功能的实现实现效果图:实现代码:1、wxmltouch-item元素绑定了bindtouchstart、bindtouchmove事件{{
----------------------对于动态的标签绑定事件------------------------复制代码代码如下:varoutTimer;//
微信小程序动态绑定事件并实现事件修改样式实例代码wxml{{item.name}}jsvarreportTypeList=[{name:"日报1",id:"1"
JavaScript一个最简单的事件模型,需要有事件绑定与触发,还有事件删除。vareventModel={list:{},bind:function(){va