javascript为元素绑定事件响应函数
javascript中为元素设置响应时间有两种方法。
(1):object.onclick=functionName;
这种方法不可以传递参数。
(2):object.onclick=function(){
functionName(arg1,arg2,...);
}
这种方法就可以传递参数了。第二种方法中有一个隐藏的问题。那就是在匿名方法是用外部变量时可能会引发问题。
请见如下代码中的红色部分:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.divNotHidden{
width:100px;
height:20px;
margin:0px;
padding:0px;
border:#060 1px solid;
background:#09C;}
.div1,.div2,.div3{
background:#F0F;
border:#060 1px solid;
width:200px;
display:none;}
.outdiv{
float:left;
border:#06F 1px solid;
}
</style>
<script type="text/javascript">
function setListener(){
var notHidden = document.getElementsByClassName("divNotHidden");
for(var i=0;i<notHidden.length;i++){
var number=i+1;
notHidden.item(i).onmouseover=function(){
showself("div"+number);
alert("div"+number);
};
notHidden.item(i).onmouseout=function (){
hiddenself("div"+number);
};
}
}
/*
上述代码中匿名函数使用了外部的变量。结果绝发现出现了错误的情况:所有的showself,hiddenself 方法的参数都成了:“div3”
猜测原因:因为给予的事件监听函数只有在事件发生时才会被执行。
当setListener函数中的for循环执行完成后,number的值是:3 。当目标的onmouseover时间发生时,才会执行:
showself("div"+number);
alert("div"+number);
这两句。所以,问题来了。这时的number值是 3 那么传给showself函数的参数就是 “div”+3 。而且永远是 “div”+3
*/
function hiddenself(id){
var inners = document.getElementsByClassName(id);
for(var i=0;i<inners.length;i++){
inners.item(i).style.display="none";
}
}
function showself(id){
var inners = document.getElementsByClassName(id);
for(var i=0;i<inners.length;i++){
inners.item(i).style.display="block";
}
}
</script>
</head>
<body onload="setListener()">
<!-- onload="setListener()"-->
<div class="outdiv">
<div class="divNotHidden">innerdiv</div>
<!-- onmouseover="showself('div1')" onmouseout="hiddenself('div1')"
--> <div class="div1">innerdiv</div>
<div class="div1">innerdiv</div>
<div class="div1">innerdiv</div>
</div>
<div class="outdiv">
<div class="divNotHidden">innerdiv</div>
<!-- onmouseover="showself('div2')" onmouseout="hiddenself('div2')"
--> <div class="div2">innerdiv</div>
<div class="div2">innerdiv</div>
<div class="div2">innerdiv</div>
</div>
<div class="outdiv">
<div class="divNotHidden">innerdiv</div>
<!-- onmouseover="showself('div3')" onmouseout="hiddenself('div3')"
--> <div class="div3">innerdiv</div>
<div class="div3">innerdiv</div>
<div class="div3">innerdiv</div>
</div>
</body>
</html>
javascript为元素绑定事件响应函数的更多相关文章
- javascript元素绑定事件
js元素绑定事件 想给一个元素绑定一个方法之后,在绑定一个方法而且不被覆盖 window.onload = function () { alert('a'); } window.onlaod=fu ...
- Jquery动态添加的元素绑定事件的3种方法
假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...
- WEB前端技巧之JQuery为动态添加的元素绑定事件.md
jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- jQuery:如何给动态生成的元素绑定事件?
jQuery的html()可以给现在元素附加新的元素,innerHTML也可以,那么,如何给这些新生成的元素绑定事件呢?直接在元素还未生成前就绑定肯定是无效的,因为所绑定的元素目前根本不存在. 然而, ...
- js动态添加的元素绑定事件
最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...
- jQuery中对未来的元素绑定事件
对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...
- jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
- 从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- 第一次学习QT
跟着大神学:http://www.cnblogs.com/tornadomeet/archive/2012/06/25/2561007.html
- http://www.zhihu.com/question/24896283
http://www.zhihu.com/question/24896283 Rix Tox,太不專業了 三百.知乎用户.raintorr 等人赞同 1. 更改变量名的几种方法这种情况下该如何快速选中 ...
- Segment Tree Build I & II
Segment Tree Build I The structure of Segment Tree is a binary tree which each node has two attribut ...
- poj 1833
http://poj.org/problem?id=1833 next_permutation这个函数是用来全排列的,按字典的序进行排列,当排列无后继的最大值时,会执行字典升序排列,相当于排序: 当排 ...
- Solr5.3.1整合IKAnalyzer
由于solr5.3.1本身不支持中文分词,而msseg4j的分词效果不明显.因而采用IK进行分词,然而参考http://www.superwu.cn/2015/05/08/2134/在google上下 ...
- sybaseIQ索引类型和使用注意事项
1. FP(Fast Projection)此索引为默认的索引形式,在创建表时系统自动设置此索引. 特点:用于SELECT.LIKE '%sys%'.SUM(A+B).JOIN操作等语句. 此类型索引 ...
- 越狱后想禁用Spotlight
如果你的是ios7越狱后不想用Spotlight搜索功能,大老板源的NoSpot ios7可轻松帮你实现.亲测可用……………………
- 队列——解密QQ号
队列——解密QQ号 --转自啊哈磊[坐在马桶上看算法]算法4:队列——解密QQ号 新学期开始了,小哈是小哼的新同桌(小哈是个小美女哦~),小哼向小哈询问QQ号,小哈当然不会直接告诉小哼啦,原因嘛你懂的 ...
- 希尔排序( Shell Sort)
原文地址:http://www.stoimen.com/blog/,在此感谢作者! Insertion sort is a great algorithm, because it’s very int ...
- ubuntu安装vmware tools
1.选择虚拟机菜单栏--安装VMware tools 选择你装虚拟机下的目录,点击 Linux.iso 再重新点击安装VMware Tools 这样会弹出一个包VMwareTools-9.6.0-1 ...