JS_javascript 기술의 THIS 및 WINDOW.EVENT.SRCELEMENT에 대한 자세한 설명-JS 튜토리얼-php.cn

JS_javascript 기술의 THIS 및 WINDOW.EVENT.SRCELEMENT에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:57:49

원래의

1315명이 탐색했습니다.

먼저 간단한 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

전혀 문제 없습니다.

그럼 어떤 상황에서는 사용할 수 없나요?

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

로그인 후 복사

method()는 response 함수에 의해 호출되는 함수이기 때문에 불가능합니다.

그러면 이런 상황에서는 어떻게 해야 할까요?

방법 1:

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

로그인 후 복사

문제없어요!

방법 2:

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>

로그인 후 복사

둘의 차이점과 연관성을 살펴보겠습니다

이것:

예를 살펴보겠습니다.

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

로그인 후 복사

이때 뜨는 답변은 "정의되지 않음"입니다. 이는 함수 호출 시 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를 매개변수로 전달해야 합니다.

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>

로그인 후 복사

이번에 얻은 답은 "click"인데, 함수 호출 시 window.event.srcElement 속성을 이용하면 얻을 수 있다는 뜻입니다.

이것은 왜 직접 사용할 수 없고 window.event.srcElement를 직접 사용할 수 있나요? 순전히 문자 그대로의 의미에서는 "현재"를 의미합니다. 함수 호출 시 특정 컨트롤을 지정하지 않으며 함수 내에서 직접 사용할 수 없습니다. 두 번째 코드에서는 이를 매개변수로 전달하므로 정답을 얻을 수 있습니다.

사실이것과 window.event.srcElement 사용의 차이점은: this.속성을 직접 사용하려면 이때 함수를 호출할 수 없지만 응답 함수여야 합니다. , window.event.srcElement에는 그러한 제한이 없습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.