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

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:57 PM

this

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

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

전혀 문제 없습니다.

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

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에는 그러한 제한이 없습니다.

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7627

Cakephp 튜토리얼

1389

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

140

Related knowledge

Vue2가 이를 통해 다양한 옵션의 속성에 접근할 수 있는 이유에 대해 이야기해보겠습니다. Dec 08, 2022 pm 08:22 PM

이 글은 Vue 소스 코드를 해석하는 데 도움이 될 것이며 이를 사용하여 Vue2의 다양한 옵션에서 속성에 액세스할 수 있는 이유를 소개하는 것이 모든 사람에게 도움이 되기를 바랍니다!

이 점을 이해하고 프론트엔드 70%를 따라잡는 글 Sep 06, 2022 pm 05:03 PM

Vue2의 이 포인팅 문제로 인해 동료가 버그로 인해 화살표 기능이 사용되어 해당 소품을 얻을 수 없게 되었습니다. 제가 그에게 소개했을 때 그는 그것을 몰랐고, 그래서 저는 일부러 프론트엔드 커뮤니케이션 그룹을 살펴보았습니다. 지금까지 적어도 70%의 프론트엔드 프로그래머들은 오늘 그것을 이해하지 못하고 있습니다. 모든 것이 불분명하다면 이 링크를 아직 배우지 않았다면 큰 소리로 말해주세요.

jQuery에서 이 키워드를 사용하는 영리한 방법 Feb 25, 2024 pm 04:09 PM

jQuery에서 this 키워드의 유연한 사용 jQuery에서 this 키워드는 현재 조작 중인 DOM 요소를 참조하는 데 사용되는 매우 중요하고 유연한 개념입니다. 이 키워드를 합리적으로 사용함으로써 페이지의 요소를 쉽게 조작하고 다양한 인터랙티브 효과와 기능을 얻을 수 있습니다. 이 기사에서는 특정 코드 예제를 결합하여 jQuery에서 이 키워드를 유연하게 사용하는 방법을 소개합니다. 간단한 이 예 먼저 간단한 이 예를 살펴보겠습니다. 우리가

이게 뭔가요? JavaScript에서 이에 대한 심층 분석 Aug 04, 2022 pm 05:02 PM

이게 뭔가요? 다음 기사에서는 JavaScript에서 이에 대해 소개하고 다양한 함수 호출 방법의 차이점에 대해 설명하겠습니다. 도움이 되기를 바랍니다.

Java에서 이 메소드를 사용하는 방법 Apr 18, 2023 pm 01:58 PM

1. this 키워드 1. this 유형: 호출되는 개체는 해당 개체의 참조 유형입니다. 2. 사용법 요약 1. this.data;//Access 속성 2. this.func();//Access 메서드 3.this ( );//이 클래스의 다른 생성자를 호출합니다. 3. 사용법 설명 1.this.data가 멤버 메서드에 사용됩니다. 이것이 추가되지 않으면 어떻게 되는지 살펴보겠습니다. classMyDate{publicintyear;publicintmonth;publicintday; 월,월){예

JavaScript는 이 포인터를 어떻게 변경합니까? 세 가지 방법에 대한 간략한 분석 Sep 19, 2022 am 09:57 AM

JavaScript는 이 포인터를 어떻게 변경합니까? 다음 기사에서는 JS에서 이 포인터를 변경하는 세 가지 방법을 소개합니다. 이것이 도움이 되기를 바랍니다.

JavaScript 화살표 함수에서 이에 대한 자세한 설명 Jan 25, 2024 pm 01:41 PM

JavaScript의 화살표 함수는 자체 this 키워드가 없는 비교적 새로운 구문입니다. 반대로 화살표 함수의 this는 이를 포함하는 범위 개체를 가리킵니다. 1. 화살표 함수의 This는 다음과 같습니다. 2. 화살표 함수는 생성자로 사용할 수 없습니다. 3. 화살표 함수는 메서드로 사용할 수 없습니다.