웹 페이지에서 렌더링(페이지를 나타내기 위해 구성하는 것)을 할 때
<head> 태그 -> <body> 태그
순서대로 된다.
아래 코드는 동작하지 않는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script >
var hw = document.getElementById('hw')
hw.addEventListener('click', function() {
alert('hello');
})
</script>
</head>
<body>
<input type="button" id="hw" value="Button">
</body>
</html>
<head> 구역의 script 구문은 <body> 영역의 'hw'라는 아이디를 가진 Element를 가져와 Event를 정의해준다. 하지만 <head>영역을 렌더링 할 때 body의 Element는 아직 쳐다보기 전이기 때문에 hw의 존재를 모른다. 그렇기 때문에 Event 역시 정의될 수 없는 것이다.
★ 출처 링크 ☆
댓글 없음:
댓글 쓰기