생활코딩 javascript ajax 예제 질문
조회수 1750회
안녕하세요^ ^ 처음으로 질문 남겨봅니다
생활코딩의 강좌를 보면서 ajax 통신을 이해해 보고 있는데요
javaScript - Ajax (2/3) : 기본 동작 방법 강좌
https://opentutorials.org/module/904/6843
에 나오는 예제에서 궁금한게 생겼습니다
demo1.html
<p>time : <span id="time"></span></p>
<input type="button" id="execute" value="execute" />
<script>
document.querySelector('input').addEventListener('click', function(event){
var xhr = new XMLHttpRequest();
xhr.open('GET', './time.php');
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
document.querySelector('#time').innerHTML = xhr.responseText;
}
}
xhr.send();
});
</script>
time.php
<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone("asia/seoul"));
echo $d1->format('H:i:s');
?>
demo1.html 에 time.php 의 내용을 출력하는 예제입니다
궁금한 점은 demo1.html에 ajax 코드에서 아래 함수의 인자입니다
function(event) 함수에 들어오는 event인자가
time.php에서 출력한 echo $d1->format('H:i:s');
값을 넘겨 받는 것 인가요?
아니면 'click' 이벤트를 받아서 함수를 실행하라는 명령이 들어오는 건가요?
감사합니다 ^ ^
-
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
2 답변
-
event 인자는 event객체입니다. DOM과 관련된 이벤트가(여기선 click) 발생하면 관련 정보는 모두 event라는 객체에 저장됩니다. addEventListener로 function(event) {~~}라는 이벤트 핸들러를 넘겨주었고, 브라우저에 해당 이벤트가 발생하면 이벤트 핸들러를 실행합니다. 결론적으로 event인자는 브라우저가 HTML 이벤트가 발생하면 event 객체와 함께 이벤트 핸들러를 호출하는 겁니다.
참고로 php의 결과값은 xhr.responseText;에 담겨있습니다.
-
(•́ ✖ •̀)
알 수 없는 사용자
-
-
addEventListener( 'eventType', fn )addEventListener는 'eventType'과 일치하는 이벤트가 발생했을때 호출될 함수를 등록하는 메서드입니다. 호출되는 함수를 보통 이벤트 핸들러라고 하는데요. 기본적으로 이벤트 핸들러가 호출될 때는 첫 번째 전달인자로 이벤트에 대한 정보(이벤트가 발생한 대상, 이벤트 종류 등)를 갖고 있는 객체가 전달됩니다.
이벤트 핸들러를 호출하는 주체는 자바스크립트 구현체(혹은 실행기)인 브라우저입니다.
관련 문서:
- addEventListener: https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener
- event: https://developer.mozilla.org/ko/docs/Web/API/Event
그리고 아래 코드는:
<script> document.querySelector('input').addEventListener('click', function(event) { console.log('do something'); }); </script>아래와 같습니다:
<script> function myFunction(event){ console.log('do something'); } document.querySelector('input').addEventListener('click', myFunction); // click 이벤트가 발생하면 myFunction을 호출하면서 첫 번째 인자로 event 객체 전달 </script>- 링크주신 Api 문서를 보면서 궁금하게 또 생겼는데요 한가지만 더 여쭤봐도 될까요? ^ ^ 그럼 전달 받은 event 객체를 활용해서 마우스에 좌표를 확인하는 Properties들 ( .clientX ... ) 은 다른 종류의 객체에 뒤에 메소드로 붙게 되면 작동을 안하고 오류가 나게 되나요? 알 수 없는 사용자 2017.6.21 15:15
- event.clientX를 어떻게 하신다는지 이해가 안되는데, 코드로 올려보시겠어요? 편집요청빌런 2017.6.21 15:19
- 말도안되는 예시일 것 같기는 한데요 ;;;;예를 들면 var foo= {}; console.log(foo.clientX); 요렇게 해보니까 크롬 console에서는 그냥 undefine이라고 나오길래요 ㅎㅎ 어떤 상황에서는 유효한 코드로 사용할 수 있나 해서요 ^ ^ 알 수 없는 사용자 2017.6.21 15:31
- clientX는 event객체에 담겨있는 값이고 event 객체는 이벤트 핸들러 함수에서 인자로 넘어오기때문에 이벤트 핸들러에서 사용할 수 있습니다. 알 수 없는 사용자 2017.6.21 15:33
- 넵!! ^ ^감사합니다 ㅎ 알 수 없는 사용자 2017.6.21 15:37
댓글 입력