JavaScript中this与window.event.srcElement在事件处理中的区别详解

作者:白露时间:2026-10-29 10:08:12浏览:571

本文详细解析JavaScript中this与window.event.srcElement在事件处理中的核心区别。通过代码示例说明,当函数作为响应函数直接绑定事件时可使用this;若函数被其他函数调用,则需通过参数传递this或使用window.event.srcElement获取触发元素。

this与window.event.srcElement基础用法对比

首先观察一个基础示例:

具体实现如下:

<input type="text" onblur="alert(this.value)"/> 该写法运行正常,没有任何问题。

那么,在哪些场景下无法直接使用this呢?


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可以获取触发事件的控件元素。

this与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>

进一步对比这两者的区别与联系。

关于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作为参数显式传递。

关于window.event.srcElement:

查看以下示例:


 <!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(){
    alert(window.event.srcElement.value);
   }
   </script>
 </head>
 <body>
 <input type="button" onclick="btnClick()" value="单击" />
 
 </body>
 </html>

此时输出的结果为“单击”,这说明在函数调用过程中,可以直接使用window.event.srcElement属性来获取目标元素。

为何this不能直接使用,而window.event.srcElement却可以直接使用?从字面含义理解,this代表“当前”对象。在函数被调用的语境下,并未明确指定具体是哪个控件,因此在函数内部直接使用this是不可行的。在第二段代码中,将this作为参数传递,从而得出了正确答案。

实际上,this与window.event.srcElement的使用区别在于:若要直接使用this属性,该函数必须是直接作为事件响应函数的绑定对象,而不能是被其他函数调用的内部函数;而window.event.srcElement则不受此限制。

以上就是本文的全部内容,希望对大家有所帮助。

作者最新文章