JavaScript onclick에서 "this"는 무엇입니까?

<a onclick="javascript:func(this)" >here</a>

this스크립트에서 무엇을 의미합니까?

질문하는 경우 thisHTML DOM 요소를 나타냅니다.

그래서이 될 것이다 <a>클릭 한 요소입니다.

그것은 DOM 되는 onclick속성이 속하는 :

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('there');
}
</script>
<a onclick="func(this)">here</a>

(이 예에서는 jQuery 를 사용합니다 .)

onclick과 같은 이벤트 핸들러 속성의 값은 "javascript :"접두사가없는 JavaScript 여야합니다. javascript : 의사 프로토콜은 URL에 사용됩니다. 예를 들면 다음과 같습니다.

<a href="javascript:func(this)">here</a>

onclick="func(this)"그래도이 양식을 우선적으로 사용해야합니다 . 또한 위의 예에서 javascript : pseudo-protocol "this"를 사용하면 <a>요소가 아닌 창 개체를 참조합니다 .

JavaScript this에서 작업을 포함하는 요소를 참조합니다. 예를 들어 다음과 같은 함수가있는 경우 hide():

function hide(element){
   element.style.display = 'none';
}

호출 hide로this 요소를 숨 깁니다. DOM의 다른 요소와 유사하더라도 클릭 한 요소 만 반환합니다.

예를 들어, this아래 HTML에서 숫자를 클릭하면 클릭 한 글 머리 기호 만 숨겨집니다.

<ul>
  <li class="bullet" onclick="hide(this);">1</li>
  <li class="bullet" onclick="hide(this);">2</li>
  <li class="bullet" onclick="hide(this);">3</li>
  <li class="bullet" onclick="hide(this);">4</li>
</ul>

여기 (this)는 dom 요소의 모든 기능 / 속성을 포함하는 객체입니다. 당신은 볼 수 있습니다

console.log(this);

그러면 계층이있는 dom 요소의 모든 속성 속성이 표시됩니다. 이것으로 dom 요소를 조작 할 수 있습니다.

또한 아래 링크에 설명하십시오.

http://www.quirksmode.org/js/this.html

키워드 이 로 하여 addEventListener의 이벤트

function getValue(o) {
  alert(o.innerHTML);
}

function hide(current) {
  current.setAttribute("style", "display: none");
}

var bullet = document.querySelectorAll(".bullet");

for (var x in bullet) { 
  bullet[x].onclick = function() {
    hide(this);
  };
};
 
/* Using dynamic DOM Event */
document.querySelector("#li").addEventListener("click", function() {
  getValue(this); /* this = document.querySelector("#li") Object */
});

li {
  cursor: pointer;
}

<ul>
  <li onclick="getValue(this);">A</li>
  <li id="li" >B</li>
  <hr />
  <li class="bullet" >1</li>
  <li class="bullet" >2</li>
  <li class="bullet" >3</li>
  <li class="bullet" >4</li>
</ul>

함수를 호출 할 때 "this"라는 단어는 함수를 호출 한 객체에 대한 참조입니다.

귀하의 예에서는 앵커 요소에 대한 참조입니다. 다른 쪽 끝에서 함수 호출은 전달 된 매개 변수를 통해 요소의 멤버 변수에 액세스합니다.

thisonclick메서드가 속한 개체를 참조합니다 . 따라서 내부 func this는 a요소 의 DOM 노드 this.innerText가 될 것이며 here.