首页 > 语言 > JavaScript > 正文

JS中的THIS和WINDOW.EVENT.SRCELEMENT详解

2024-05-06 14:41:30
字体:
来源:转载
供稿:网友

我们先看一个简单的例子:

代码如下:
<input type="text" onblur="alert(this.value)"/>完全没有问题。

那么什么情况下不可以用?

fuction method(){  alert(this.value);}<input type="text" onblur="method()"/>

这个就不可以,因为method()是被响应函数调用的函数。

那么这种情况下怎么办?

方法一:

fuction method(btn){  alert(btn.value);}<input type="text" onblur="method(this)"/>

没问题!

方法二:

fuction method(){  alert(window.event.srcElement.value);}<input type="text" onblur="method()"/>

没问题!window.event.srcElement取得触发事件的控件

我们在看一个稍微绕一点的例子

<head>  <script type="text/javascript">    function InitEvent() {      var inputs = document.getElementsByTagName_r("input");      for (var i = 0; i < inputs.length; i++) {        inputs[i].onblur = OnblurEvent;      }    }    function OnblurEvent() {      // OnblurEvent是onblur的响应函数,而不是被响应函数调用的函数      // 所以可以用this来获取发生事件的对象      if (this.value.length > 0) {        this.style.backgroundColor = "white";      }      else {        this.style.backgroundColor = "red";      }    }  </script></head><body onload="InitEvent()">  <input id="Text1" type="text" />  <input id="Text2" type="text" />  <input id="Text3" type="text" /></body></html>

我们再来看看2者之间的区别和联系

this:

  下面先看一个例子:

 <html> <title>this与srcElement的区别</title> <head> <script type="text/javascipt>" function btnClick(){  alert(this.value); } </script> </head> <body> <input type="button" value="单击" onclick="btnClick()"/> </body> </html>

 此时弹出的答案为“undefined”,说明在调用函数时不能使用this.属性来获取。再看下一个例子:

 <!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>   <title>无标题页</title>   <script type="text/javascript">   function btnClick(btn){    alert(btn.value);   }   </script> </head> <body> <input type="button" onclick="btnClick(this)" value="单击" />  </body> </html>

此时得出的答案为“单击”,此时为什么可以呢?从代码中可以看出,在onclick事件调用函数btnClick()时,将this当作参数传递给了函数。

综合以上:在函数调用时不能直接使用this.属性来获取,而必须将this当作参数传递。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选