JavaScript) 이벤트 처리 : 사용자의 입력 / 버튼 클릭 / 체크박스 체크 이벤트 처리 방법

1. 버튼 클릭 이벤트 처리 (onclick)

: 버튼 클릭 시 입력한 값을 가져와서 <p> 태그에 표시하는 방법

 

HTML 코드:

<p id="demo">p tag</p>
<input type="text" id="msg" placeholder="입력"/>
<button type="button" onclick="buttonClick()">완료</button>

 

JavaScript 코드:

function buttonClick() {
    // 입력된 값을 가져옴
    let message = document.getElementById('msg').value;
    
    // 가져온 값을 <p> 태그에 표시
    document.getElementById('demo').innerText = message;
}

설명:

1. 사용자가 <input> 태그에 값을 입력

2. [완료] 버튼을 클릭하면 buttonClick() 함수 실행

3. document.getElementById('msg').value → 입력한 값을 가져옴

4. document.getElementById('demo').innerText = message → <p> 태그 내용을 변경

5. 사용자가 입력한 내용이 <p> 태그로 출력됨!

---

2. 체크박스 클릭 이벤트 처리

: 체크박스는 체크 여부( O 또는 X )를 감지하여 처리할 수 있음

 

HTML 코드:

<input type="checkbox" id="chk" onclick="checkBoxClick()"/>확인

 

JavaScript 코드: 

: .checked 활용!

function checkBoxClick() {
    let chk = document.getElementById("chk").checked;
    console.log(chk);
}

설명:

1. 사용자가 체크박스를 클릭하면 checkBoxClick() 함수 실행

2. document.getElementById("chk").checked

    - 체크되어 있으면 true 반환

    - 체크 해제하면 false 반환

3. console.log(chk); → 콘솔에 true 또는 false 출력

4. 체크박스의 상태를 감지할 수 있음!

이벤트	설명	예제
onclick	클릭 시 실행	<button onclick="함수()">버튼</button>
.value	입력된 값 가져오기	document.getElementById("msg").value
.checked	체크박스 체크 여부	document.getElementById("chk").checked

 

JavaScript) 기본 개념 정리 : 실행 방식 / DOM 조작 / 이벤트 처리 / 비교 연산자