웹 페이지에서 일어날 수 있는 대부분의 일들을 Event 라고 부른다.
웹 페이지에는 다양한 이벤트들이 존재하는데
그냥 마우스를 움직여도 이벤트이고 키보드를 누르거나 페이지를 스크롤 하는 것도 이벤트이다.
다운받은 index파일을 열면 클릭버튼 하나있는데
지금은 클릭해도 아무런 변화가 일어나지 않는다.
자바스크립트를 통해서 이 HTML 버튼을 클릭했을 때의 특별한 동작을 만들어내는 법을 알아보자
이벤트와 버튼 클릭
<body>
<div>
<button id="myBtn">Click!</button>
</div>
<script src="main.js"></script>
</body>우선 querySelector를 이용해서 버튼을 선택한다.▼
//이벤트(Event)와 버튼 클릭
const btn = document.querySelector('#myBtn')▲ 'btn' 변수 생성하고 querySelector 메소드를 이용해서 id인 #myBtn 을 실행한다.
oneclick 프로퍼티
변수에 oneclick 프로퍼티 함수를 할당 해주면 버튼에 대한 클릭 이벤트에 원하는 동작을 할 수 있게 된다.
//이벤트(Event)와 버튼 클릭
const btn = document.querySelector('#myBtn')
btn.onclick = function() {
console.log('hello');
}
태그를 선택해서 onclick 프로퍼티에 함수를 할당 해주면
버튼에 대한 클릭 이벤트에 원하는 동작을 할 수 있게 된다.
//이벤트(Event)와 버튼 클릭
const btn = document.querySelector('#myBtn')
//이벤트 핸들링 (Event Handling)
btn.onclick = function() { //이벤트 핸들러 (Event Handler)
console.log('hello');
}▲ 참고로 이벤트가 발생했을 때 어떤 특별한 동작을 하도록 이벤트를 다루는 것을 '이벤트 핸들링' 이라고 부르고
구체적인 동작들을 코드로 표현한 함수 부분을 '이벤트 핸들러' 라고한다.
사실 이벤트 핸들링은 자바스크립트 파일에서뿐만 아니라 HTML 태그에 직접 작성할 수있다.▼
<body>
<div>
<button id="myBtn" onclick="console.log('Hello');">Click!</button>
</div>
<!-- <script src="main.js"></script> -->
</body>버튼 태그 안에 onclick이라는 속성에 자바스크립트 코드를 넣어주면
이전에 자바스크립트 파일에서 작성한 것과 같이 똑같이 동작하는 것을 확인 할 수 있다.▼
※ 주의사항 ▼
그런데 이 방법은 실제로 잘 사용되는 방법은 아니다.
지금은 간단한 자바스크립트 코드이기 때문에 이렇게 작성하는게 뭔가 효율적이고 간결해보이긴 하지만
실제로 동작시킬 대부분의 코드들은 이렇게 간단하지 않아서
조금만 더 복잡한 코드인 경우 가독성 자체가 좋아지지 않게 되며
HTML, JS 코드가 섞이게 되면서 일관성을 유지하기가 어렵기 때문에 유지 보수에 큰 문제가 생긴다.
그래서 웹페이지 구조를 결정하는 일은 HTML 파일에,
동작을 담당하는 일은 js파일에만 작성하는 것을 권장한다.
★GitHub 주소 (이벤트와 버튼클릭)
https://github.com/SeopE9611/JavaScript_soloPlay/tree/main/interactive_JS/03.EventAndButton_Click
JavaScript_soloPlay/interactive_JS/03.EventAndButton_Click at main · SeopE9611/JavaScript_soloPlay
Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.
github.com
'JS' 카테고리의 다른 글
| (4) Interactive JavaScript - window 객체 (0) | 2024.10.08 |
|---|---|
| (1)~(3) Interactive JavaScript 내용 정리 (0) | 2024.10.08 |
| (2) Interactive JavaScript - CSS 선택자로 tag select (0) | 2024.10.08 |
| (1) Interactive JavaScript - id,class tag select (0) | 2024.10.07 |
| (40) JavaScript - 자료형(심화) / const, 변수&상수 간단이론 (0) | 2024.10.04 |