以前没有怎么使用过this 关键字对象,也没怎么用心去理解过,最近接触到了,走了不少弯路,现记载下来,跟需要的朋友分享,望高手多多支持新人的成长。。。。
1
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5<title>hhhh</title>
6<script type="text/javascript">
7function ff()
8{
9 alert(this.id);
10}
11</script>
12</head>
13
14<body>
15<div id="div1" onclick="ff()"> click on me</div>
16
17<div id="div2">this is son</div>
18</body>
19</html>
代码说明:想通过点击div1 的onclick事件来控制div2的相关属性,但以上函数出现了问题,问题就处在了 this 上面,参考来自http://topic.csdn.net/u/20081021/01/4ef4ed08-0f34-4587-8d61-0d1649bede98.html 的文章解释:
对于ff这个函数:
function ff(){
alert(this.id);
}
这个函数是全局函数,这种全局函数实际上是属于window的(可以通过window.doSomething来访问),如果直接调用,那么根据“this always refers to the “owner” of the function we're executing”,那么函数中的this就是window,但是window没有id属性,所以显示“undefined”;
在html元素中这样调用
<div id="div1" onclick="ff();">div1 </div>
这时也会显示“undefined”,这就相当于如下代码:
document.getElementById("div1").onclick = function(){doSomething();}
当点击div1时,调用属于window的doSomething函数,所以也是显示“undefined”;
也可以进行验证:
function ff(){
alert(this.id);
}
alert(window.ff);//证明了doSomething是属于window的
}
2.那我们可以怎么进行改进呢
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>hhhhhh</title>
6 <script type="text/javascript">
7 function ff()
8 {
9 alert(this.id);
10 }
11 </script>
12 </head>
13 <body>
14 <div id="div"> click on me</div><br />
15
16 <div id="div2">this is son</div>
17 <script type="text/javascript">
18
19 var s= document.getElementsByName("div");
20 for(var i=0;i<s.length;i++)//若是模板生成div,并且是对奇数次的div 添加onclick事件的话,可以用i+=2
21 {
22 s[i].onclick = ff
23
24 }
25
26 </script>
27 </body>
28 </html>
如上也是可以实现的,不同的是动态添加了onclick 事件。
3.下面还有一种最为简单的 ,也是开始没有想到的
好了,到这朋友们可以看出那种方法比较简单了,多提一点,就是当div1 和div2 全是模板替换生成的时候,可能就没id 的属性,那么怎么用第一个div去控制第二个div的属性呢,比如去控制display属性,这也是平时用到的比较多的, alert(a.nextSibling.id); 不就正可以实现么。呵呵
不当之处,欢迎指正。