在早先的一篇blog中说event的时候有些关于方法中this使用的问题讨论,这里整理单独出来。
---------首先解释一下,这里说明的this的用法主要涉及到方法的调用问题。
1、this代表了什么?
[code]function doSomething() {
this.style.color = '#cc0000';
}[/code]
这个方法中this代表了什么呢?它试图改变谁的样式呢?
[color=green]可以很不负责任的告诉你谁调用了它就代表谁![/color]
以一段代码说明如下:
[code]<html>
<head><title></title>
<script language="javascript" type="text/javascript">
function doSomething() {
this.style.color = '#cc0000';
}
doSomething();
</script>
</head>
<body>
<div id="clickme" onclick="doSomething()"></div>
</body>
</html>[/code]
上面的代码中定义了doSomething方法,并且调用了2次,一次直接调用,另外一次使用onclick事件触发,可惜很不幸,浏览器总是说this.style has no properties!这是为什么呢,这里的关键就是我们并没有明确的给定this所代表的对象[或者说我们明确的把this分配给了一个我们不清楚的对象],在这种情况下this所代表的就是window对象。如果我们非要把doSomething中的this分配给ID为clickme的div的话,则需要做的就是把doSomething复制给传统的事件onchick,处理方法为[code]document.getElementById("clickme").onclick = doSomething;[/code]
修改后的代码为:
[code]<html>
<head><title></title>
<script language="javascript" type="text/javascript">
function doSomething() {
this.style.color = '#cc0000';
}
</script>
</head>
<body>
<div id="clickme">123</div>
<script language="javascript" type="text/javascript">
document.getElementById("clickme").onclick = doSomething;
</script>
</body>
</html>[/code]
这里唯一要注意的一点就是[color=red]document.getElementById("clickme").onclick = doSomething;[/color]的位置要出现在<div id="clickme">之后!为什么就不解释了哈
下面简单解释一下一个元素触发事件的差别,如上面的两中形式:
1:
<div id="clickme" onclick="doSomething()">这个据说叫[color=green]inline event registration[/color]
2:
element.onclick = doSomething;
方式一只是做了一个引用,并没有做复制方法的处理,而2则不同,引用并做了复制方法的处理,所以方式1只是简单的call doSomething。我们可以使用如下的方式来用一种看得件的方式理解这个问题;
使用方法一:<div id="clickme" onclick="doSomething()">
我们alert(document.getElementById("clickme").onclick);我们得到的代码为:
[code]
//这里只给出firefox下的形式,至于IE那个烂东东,就先不管了……
function onclick(event){
doSomething(); //firefox下,IE下应该是个匿名函数anonymous(){...}
}[/code]
而使用方法二我们得到的却是doSomething的定义:
[code]function doSomething(){
this.style.color ="#cc0000";
}[/code]
需要注意的一些问题是:
如下的使用都只是做了引用的:
[code]element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element onclick="doSomething()">[/code]
而下面的这些则做了复制:
[code]element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}
<element onclick="this.style.color = '#cc0000';">[/code]
一个简单的避免this出错的方法就是传递并使用它,修改方法doSomething的定义为:
[code]function doSomething(o){
o.style.color="#cc0000";
}
//然后
<div onclick="doSomething(this)">[/code]
---------首先解释一下,这里说明的this的用法主要涉及到方法的调用问题。
1、this代表了什么?
[code]function doSomething() {
this.style.color = '#cc0000';
}[/code]
这个方法中this代表了什么呢?它试图改变谁的样式呢?
[color=green]可以很不负责任的告诉你谁调用了它就代表谁![/color]
以一段代码说明如下:
[code]<html>
<head><title></title>
<script language="javascript" type="text/javascript">
function doSomething() {
this.style.color = '#cc0000';
}
doSomething();
</script>
</head>
<body>
<div id="clickme" onclick="doSomething()"></div>
</body>
</html>[/code]
上面的代码中定义了doSomething方法,并且调用了2次,一次直接调用,另外一次使用onclick事件触发,可惜很不幸,浏览器总是说this.style has no properties!这是为什么呢,这里的关键就是我们并没有明确的给定this所代表的对象[或者说我们明确的把this分配给了一个我们不清楚的对象],在这种情况下this所代表的就是window对象。如果我们非要把doSomething中的this分配给ID为clickme的div的话,则需要做的就是把doSomething复制给传统的事件onchick,处理方法为[code]document.getElementById("clickme").onclick = doSomething;[/code]
修改后的代码为:
[code]<html>
<head><title></title>
<script language="javascript" type="text/javascript">
function doSomething() {
this.style.color = '#cc0000';
}
</script>
</head>
<body>
<div id="clickme">123</div>
<script language="javascript" type="text/javascript">
document.getElementById("clickme").onclick = doSomething;
</script>
</body>
</html>[/code]
这里唯一要注意的一点就是[color=red]document.getElementById("clickme").onclick = doSomething;[/color]的位置要出现在<div id="clickme">之后!为什么就不解释了哈
下面简单解释一下一个元素触发事件的差别,如上面的两中形式:
1:
<div id="clickme" onclick="doSomething()">这个据说叫[color=green]inline event registration[/color]
2:
element.onclick = doSomething;
方式一只是做了一个引用,并没有做复制方法的处理,而2则不同,引用并做了复制方法的处理,所以方式1只是简单的call doSomething。我们可以使用如下的方式来用一种看得件的方式理解这个问题;
使用方法一:<div id="clickme" onclick="doSomething()">
我们alert(document.getElementById("clickme").onclick);我们得到的代码为:
[code]
//这里只给出firefox下的形式,至于IE那个烂东东,就先不管了……
function onclick(event){
doSomething(); //firefox下,IE下应该是个匿名函数anonymous(){...}
}[/code]
而使用方法二我们得到的却是doSomething的定义:
[code]function doSomething(){
this.style.color ="#cc0000";
}[/code]
需要注意的一些问题是:
如下的使用都只是做了引用的:
[code]element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element onclick="doSomething()">[/code]
而下面的这些则做了复制:
[code]element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}
<element onclick="this.style.color = '#cc0000';">[/code]
一个简单的避免this出错的方法就是传递并使用它,修改方法doSomething的定义为:
[code]function doSomething(o){
o.style.color="#cc0000";
}
//然后
<div onclick="doSomething(this)">[/code]