onclick与this
这个其实也是一个很基础的问题,不过又碰巧遇到了,所以记录一下。
假设我们有这么一个需求,按下按钮,弹出提示框,显示按钮的value值。
可能有一些人提起笔就写:
<button onclick="a()" value="a">click</button>
<script>
function a(){
alert(this.value);
}
</script>
看上去好像符合逻辑,其实实际执行一看,弹出框里显示的是undefined。将此时的this打印一下,发现此时的this指的是window。
其实,这里我们为按钮绑定的onclick事件,表示的是对这个函数的引用,当我们点击这个按钮时,会在window下执行所绑定的函数。而不是想当然地认为此时是按钮这个dom在调用函数。
那么我们应该怎么达到我们的目的呢,方法有多种。
第一种是在函数调用的时候传入参数。
<button onclick="a(this.value)" value="a">click</button>
<script>
function a(x){
alert(x);
}
</script>
也许你会觉得这种方法不符合你编程的思路,那么你可以试试另一种方法。
<button id="b" value="b">click</button>
<script>
function b(){
alert(this.value)
}
document.getElementById("b").onclick = b;
</script>
这种方法同样可以解决问题。
可能看到这里你会疑惑,为什么这时候this.value又起作用了。
其实这里做的事与前面不同,这里是将b函数的内容赋值到了这个按钮的dom的onclick上,而不是调用window下的这个函数。当点击按钮时,调用的其实是按钮自身的函数,这是的this自然也就是指着这个按钮本身了。