2017-02-15 2 views
1

제 질문은이 html 코드에 관한 것입니다 (Chrome 56에서 일하고 있습니다). 슬라이더 컨트롤 이동 값을 콘솔에 프린트되는 무리 리드 - 예상 이 Javascript 이벤트 처리기 인수는 어디에 정의되어 있습니까?

<html> 
 
<body> 
 
<input type='range' min='0' max='5' step='0.1' oninput="console.log(value)"> 
 
</body> 
 
</html>

이 코드는 작동한다.

value 변수는 console.log(value)이 실행되는 범위에서 정의됩니다. 내 주요 질문은,이 value 변수가 어디에서 오는 것입니까? 또한 "그냥 거기에 있습니까?"와 같은 다른 변수가 있습니까? 그러한 변수에 대한 문서가 있습니까? 그리고 거기에 의존하는 것이 좋은 습관입니까?

+0

입력 필드 "value"속성을 참조하고 "this"가 html 태그 자체를 참조하고 모든 값을 전달하면 "event"를 포함한 모든 html 속성을 전달할 수 있습니다 - 데이터 –

+0

하지만 왜/어떻게 ? JS가 가지고 있다고 생각하지 않은 "내재적 인"this "처럼 보입니다. 이 동작은 Javascript의 일부입니까, 아니면 브라우저에서 추가로 수행 할 작업입니까? – gnarledRoot

+0

http://jibbering.com/faq/names/event_handler.html – Bergi

답변

1

따라서 입력 필드의 컨텍스트 내에서 콜백이 수행됩니다. "value"변수는 실제로 입력 값의 "value"속성입니다. this.value ...

두 번째 질문이 있습니다. "이"문맥에서 다른 속성이 무엇인지 알고 싶습니까? 처리기에서 다음을 시도하십시오.

oninput="console.log(this)" 

개발자 콘솔에서 검사 할 수있는 개체가 뱉어 낼 것입니다.

희망이 도움이됩니다.

+0

'console.log (this.value)'를 강제 작성하는 대신'console.log (value)'를 쓸 수있게 해주는 것은 무엇입니까? – gnarledRoot

+0

그건 자바 스크립트에서 변수 범위가 작동하는 방법입니다. 'var value = 'nothing';을 정의한다면 현재의 "value"변수가됩니다. 그러나 핸들러에 정의 된 지역 변수가 없으므로 "this"로 문맥을 찾습니다. 이 경우 "this"는 입력 필드입니다. 또한 당신은'console.log (window.value) '를 사용하여 윈도우의 "value"속성에 접근 할 수 있습니다. (당신이 직접 설정하지 않으면 존재하지 않을 것입니다.) – MacPrawn

+0

암시적인'this' (C++ 에서처럼)처럼 들립니다. Javascript에는 없다고 생각했습니다. JS가 "문맥에 대해"이 포인터를 찾는다는 설명을 찾을 수 없었다. 브라우저 자체가 'this'속성을 핸들러의 범위에 복사하는 추가 단계 (순수 JS의 일부가 아님)를 수행하는 것처럼 느껴지지만 이것에 대한 참조도 찾을 수 없습니다. – gnarledRoot