[JSP&Javascript] 하나의 태그에 대해 이벤트가 두번 적용될때 (feat. html 로드순서)

오늘 개발을 하는중에... 스크립트 실행 순서에 대해서 의문점이 들었습니다..

html 상에 존재하는 input 태그에 대해서 onclick 이벤트가 두번 걸려있었는데요

아래 소스코드를 먼저 보시죠...

1 <%@include file="파일이름.jsp"%>          -----------------> 여기에도 toLogin태그에 해당하는 onClick 이벤트가 정의되어있음.

2 <script type="text/javascript">

3 $(document).ready(function() {

4     $("#toLogin").on("click", fnuction() {

5     ........

6     )};

7 <input type="button" value="로그인" id="toLogin" />

8 });

즉, include 되어있는 "파일이름.jsp"내에 있는 <script> 태그에도 toLogin 태그에 대해 onClick 이벤트가 정의되어있고,

현재 코드 내에도 toLogin에 대한 onClick 이벤트가 정의되어 있었다는거죠..

이럴 경우에는 첫째줄 코드에 있는 onClick 이벤트가 적용이 될까요?

아니면, 넷째 줄에 있는 onClick 이벤트가 적용이 될까요??

생각 하셨다면 정답을 확인하세요!!

둘 다 실행이 됩니다..(하지만 넷째줄 이벤트로 적용됨)   <-----정답을 드래그 하세요       

----------------------------------------------------------------------------------------------------------------------------------------

웹 엔진에 존재하는 HTML/XML 파서가 문서를 읽고나서 파싱 후 DOM Tree를 만들게 되는데요,

그 실행순서는 다음과 같습니다.

1. HTML 문서를 다운로드 한다.

2. HTML 문서를 위에서 부터 아래로 파싱 한다.

3. javascript , style 태그 등을 파싱한다.

4. 페이지 로딩이 끝나면 html 태그에서 javascript 등을 참조하고, 화면에 뿌려준다.

---> 결론적으로 페이지에 이미지를 뿌려주거나 하는 부분은 스크립트 등이 로딩되고 난 후 실행되게 됩니다.

위에서 두개의 onClick 이벤트가 모두 적용 된 이유는 javascript 등 모든 문서를 파싱 한 후 화면에 뿌려주게 되므로,

실제 웹 브라우저 상에 개발자도구(F12)를 통해 Elements 들을 확인하면

위에서 아래로 읽힌 모든 소스코드가 존재하고, 위에서부터 아래로 실행이 되니, 먼저 include된 파일에 존재하던 이벤트가 실행되고, 아래에 존재하는 이벤트는 나중에 실행되게 되는 것 입니다. 

(위에 답에서 결과가 넷째줄 이벤트인 이유는 첫째줄에 있는 include 파일 이벤트가 먼저 실행되고, 넷째줄에 있는 이벤트가 실행되므로 결과적으로는 (사람이 보는 육안으로는) 마지막 실행된 이벤트가 적용된다는 말입니다.)

물론 하나의 코드에 저렇게 같은 태그에 대해서 이벤트가 2개 존재하는것 자체가 이해가 안되실 수 있겠지만...

개발 운영 업무를 하다보면 저렇게 불가피하게 두개가 끼어있는 경우가 있습니다. ㅠㅠ

include된 jsp가 common.js 같은 역할을 하게 되는 경우에요 .. ㅠ

소스코드를 다 뒤집을 순 없으니 비 효율적이지만 그냥 유지하는것 같습니다..

무튼 이번 일을 통해서 웹브라우저 렌더링 순서도 다시한번 공부하게 되었네요 ^^~~~