JavaScript onclick의 "this"는 무엇입니까?

Question

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

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

Answer 1

약 this은 HTML DOM 요소를 나타냅니다.

따라서 클릭 한 요소는 <a>입니다.

Answer 2

thisonclick 메서드가 속한 개체를 referes. 그래서 내부 functhis은 a 요소의 DOM 노드이고 this.innerText은 here이됩니다.

Answer 3

그것은 onclick 속성이 속하는 DOM의 요소를 말한다 (.이 예 jQuery 사용)

가

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

Answer 4

함수를 호출 할 때, 단어 "이"기준은 함수를 호출 한 객체에 전달합니다.

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

Answer 5

onclick과 같은 이벤트 처리기 속성의 값은 "javascript :"접두어없이 JavaScript 여야합니다. 자바 스크립트 : 의사 프로토콜은 예를 들어, URL에 사용됩니다

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

당신은 생각이 우선으로 onclick="func(this)" 양식을 사용합니다. 자바 스크립트 : 의사 프로토콜을 사용하는 위 예제에서 "this"는 <a> 요소가 아닌 window 객체를 참조합니다.

Answer 6

JavaScript에서 this은 동작이 포함 된 요소를 나타냅니다. 요소를 숨길 this와 hide를 호출

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

: 당신은 예를 들어, 함수 hide()을했다. 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> 

Answer 7

여기 (this)는 dom 요소의 모든 기능/속성을 포함하는 개체입니다. 당신이

console.log(this); 

에 의해이 모든 계층 구조와 DOM 요소의 속성을 속성이 표시됩니다 볼 수 있습니다. 이렇게하면 dom 요소를 조작 할 수 있습니다.

또한 아래 링크를 설명 : -

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

Answer 8

키워드 이하여 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>