메뉴 건너뛰기

<!DOCTYPE html>
<html>
<head>
<title>이벤트 객체 전달받기</title>
</head>
<body>
<p id="p">마우스를 올려 보세요</p>
<button onclick="f(event)">클릭하세요</button>
<script>
    function f(e){
        alert(e.type);
    }

    document.getElementById("p").onmouseover = f;
</script>
</body>
</html>

보통 코드를 작성하면 위에서 아래로 읽어서 실행하는 것으로 알고 있는데

<button onclick="f(event)">에서 f(event) 함수를 사용하는데 정의되있기전에 사용하면 원래는 오류를 발생하지 않나요?

document.getElementById("p").onmouseover = f;도 밑에 정의되있는데 왜 <p id="p">가 사용되는지 잘 모르겠습니다.

 

?
  • ?
    관리자 2020.11.05 13:58

    좋은 질문입니다. 질문한 분의 말처럼, 선언된  후 사용되는 것이 원칙이지요.
    이 예제 역시 f() 함수가 선언된 이후에 f() 함수가 사용(호출)되고 있습니다. 다음 설명을 보세요.

    웹페이지가 로딩될 때 아래의 부분을 만나면
    <button onclick="f(event)">클릭하세요</button>

    함수 f()를 호출하는 것이 아닙니다. onclick 속성에 그저 "f(event)"라는 코드를 등록하지요. 함수호출문이라는 것조차 해석하지 않습니다.
    이것이 바로 스크립트 언어의 특징입니다. 실행 중에 오류가 있으면 실행이 중단되는 것이 스크립트 언어의 특징입니다.

    그러고나서 내려가면 <script> 태그를 만나고 그곳에 함수 f()의 선언문을 보게 됩니다. 이제 여기서 함수 f()의 존재를 기억해 두겠지요.
    그리고 웹페이지의 로딩이 완료되고 화면에는 웹 페이지가 출력됩니다.
    그리고 사용자가 버튼을 누르지 않으면 함수 f()가 호출될 일도 없습니다.
    만일 사용자가 버튼을 누르면 그때 버튼의 onclick에 등록해둔 코드를 실행합니다.
    등록해둔 코드는 f(event)이고 함수 f()를 호출합니다.
    함수 f()가 이전에 웹페이지 로딩시에 인지되었고, 함수 f()가 자연스럽게 실행됩니다.

  • ?
    질문드립니다 2020.11.09 13:19
    아 감사합니다 확실히 이해가됬습니다

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.20 18236
403 오픈챌린지 5장 new ces 2024.04.19 1
402 책을 종이책으로 구매했는데 1 ddd 2024.03.21 76
401 저기 황기태 저자님 1 방문자 2024.02.10 129
400 428p 예제 9-21 키이벤트 응용 질문이 있습니다. 3 아인슈페너 2023.11.24 74
399 연습문제 3장 5번 문제 1 seungjun 2023.10.26 119
398 2장 오픈챌린 cmc 2023.09.17 145
397 웹서버소프트웨어 1 file park 2023.04.15 195
396 Sublime Text, VS code IDE설명 update바랍니다 1 삼오칠 2023.04.15 85
395 Atom은 IDE 리스트에서 삭제해주세요. 1 삼오칠 2023.04.15 82
394 예제 2-25 <video>태그로 비디오 삽입 2 file 코딩어렵다 2023.04.13 85
393 예제 2-22 2개의 인라인 프레임을 가진 웹 페이지(91p) 2 file 코딩어렵다 2023.04.12 53
392 비정형 표 만들기 다운로드 1 애치 2023.04.04 94
391 오픈챌린지 5 file ab 2023.02.17 162
390 오픈챌린지 1 ab 2023.02.16 132
389 form 태그 1 열공이 2023.01.31 86
388 예제 2-21 질문입니다. 1 file 열공이 2022.12.23 116
387 계산기 문제 변형 문의 file Mikael 2022.12.13 55
386 6장 이론문제 9번 지역,전역,블록변수 질문이요. 문신 2022.12.10 58
385 2장 이론 문제 답 문의 MIKAEL 2022.12.09 228
384 2장 이론문제 4번 답 문의 MIKAEL 2022.12.09 73
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로