Home > Article > Web Front-end > Detailed explanation of THIS and WINDOW.EVENT.SRCELEMENT in JS_javascript skills

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

WBOYOriginal: 2016-05-16 15:57:491316browse

Let’s look at a simple example first:

Copy code The code is as follows:

bfe7eeca3a6509d56660467e0e7b502cNo problem at all.

So under what circumstances can it not be used?

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

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)"/>

No problem!

Method 2:

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

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>

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>

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>

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement floating shopping cart with js cookies_javascript skillsNext article：How to implement floating shopping cart with js cookies_javascript skills

See more

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

Related articles