Detailed explanation of THIS and WINDOW.EVENT.SRCELEMENT in JS

Detailed explanation of THIS and WINDOW.EVENT.SRCELEMENT in JS_javascript skills

WBOY

Release： 2016-05-16 15:57:49

Original

1353 people have browsed it

Let’s look at a simple example first:

Copy code The code is as follows:

No problem at all.

So under what circumstances can it not be used?

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

Copy after login

This is not possible because method() is a function called by the response function.

So what should you do in this situation?

Method 1:

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

Copy after login

No problem!

Method 2:

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

Copy after login

No problem! window.event.srcElement gets the control that triggered the event

We’re looking at a slightly more convoluted example

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

Copy after login

Let’s take a look at the differences and connections between the two

this:

Let’s look at an example:

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

Copy after login

The answer that pops up at this time is "undefined", which means that the this. attribute cannot be used to obtain it when calling the function. Let’s look at the next example:

 <!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>

Copy after login

The answer obtained at this time is "click", why is it possible at this time? As can be seen from the code, when the onclick event calls the function btnClick(), this is passed to the function as a parameter.

To sum up the above: When calling a function, you cannot directly use the this. attribute to obtain it, but this must be passed as a parameter.

window.event.srcElement:

Look at an example below:

 <!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>

Copy after login

The answer obtained at this time is "click", indicating that you can use the window.event.srcElement. property to obtain it when calling the function.

Why can’t this be used directly but window.event.srcElement can be used directly? In a purely literal sense this means "current". When the function is called, the specific control is not specified. It is not allowed to use this directly in the function. In the second piece of code, this is passed as a parameter, so the correct answer can be obtained.

In factThe difference between the use of this and window.event.srcElement is: if you want to use this. attribute directly, the function at this time cannot be called but must be a response function, while window.event. srcElement has no such restriction.

The above is the entire content of this article, I hope you all like it.