728x90
- 이벤트 핸들러 : 웹 페이지에서 사용자 상호작용과 관련된 동적인 기능을 구현하기 위해 사용되는 기술이다. Ex) 마우스 클릭, 키보드 입력, 스크롤 등
- 자바스크립트는 다양한 이벤트 핸들링 API를 제공한다.
HTML 내부 이벤트 핸들러
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>내부 이벤트 핸들러</title>
</head>
<body>
<form>
<button id="myButton" onClick="function()">Click me</button>
</form>
</body>
<script>
function(){
alert("버튼이 클릭되었습니다!");
}
</script>
</html>
여기서 버튼을 누르면 onClick이라는 이벤트 핸들러에 통제하에 실행된다. 그리고 아래 스크립트 태그에서 자바스크립트 코드를 정의하고 있다. 그러나 이것은 지양하는 방법이다.
유지보수가 어렵고 보안에도 좋지 않다. 그래서 Chrome 확장 프로그램에서는 아에 내부 이벤트 핸들러가 포함되어 있으면 실행조차 안되도록 만들어 버린다.
HTML 외부 이벤트 핸들러
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 입력 예제</title>
<script src="./sendHtttp.js" nonce="your-generated-nonce"></script>
</head>
<body>
<form>
<label for="userInput">텍스트 입력:</label>
<input type="text" id="userInput" name="userInput">
<button id="myButton">Click me</button>
</form>
</body>
</html>
<HTML 코드>
document.addEventListener('DOMContentLoaded', function () {
// DOM이 완전히 로드된 후 실행되는 코드
// 버튼 요소 가져오기
var myButton = document.getElementById('myButton');
// 클릭 이벤트 핸들러 추가
myButton.addEventListener('click', function () {
// 클릭 시 실행될 함수
sendPostRequest();
});
// 기타 초기화 코드나 다른 함수들 추가 가능
});
function sendPostRequest() {
// FormData 객체 생성
var formData = new FormData();
// 입력 필드에서 값을 가져와 FormData에 추가
var userInputValue = document.getElementById("userInput").value;
formData.append("userInput", userInputValue);
// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
// POST 요청 설정
xhr.open("POST", "<http://localhost:8080/write>", true);
// 요청이 완료되었을 때의 이벤트 핸들러 설정
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// 요청이 성공적으로 완료된 경우의 처리
console.log(xhr.responseText);
} else if (xhr.readyState == 4 && xhr.status != 200) {
// 요청이 실패한 경우의 처리
console.error('POST request failed. Status: ' + xhr.status);
}
};
// POST 요청 전송
xhr.send(formData);
}
<자바스크립트 코드>
이것을 보면 먼저 버튼에 onClick 같은 핸들러가 없고 자바스크립트 파일을 따로 만들고 거기서 이벤트 처리를 해주는 모습을 볼 수 있다. 헤더에 src 태그로 미리 선언해놓으면 id를 가져올 수 있는 듯 하다.
이렇게 하면 외부 이벤트 핸들러가 되고 훨씬 안전하고 편하게 유지보수를 할 수 있다.
- addEventListener()
- 요소(버튼 등)에 이벤트 핸들러를 등록할 수 있다. 이 방법은 HTML 요소와 자바스크립트 코드를 분리하여 작성할 수 있어 유지보수성이 높다.
<button id="myButton">Click me!</button> const button = document.querySelector('#myButton'); button.addEventListener('click', function() { alert('Hello, world!'); });
'Dev > JavaScript' 카테고리의 다른 글
| Promise 문법 사용하기 (0) | 2024.08.09 |
|---|---|
| JavaScript - var, let , const 차이 (0) | 2024.06.26 |
| JavaScript - 자바스크립트의 클래스 (0) | 2024.06.26 |
| javascript - 객체 정렬 (0) | 2024.06.26 |
| JavaScript - 고차함수(map, fill, reduce) (0) | 2024.06.25 |