1. addEventListener 사용한 이벤트 처리
- 이전에 사용한 많은 이벤트 방식이 있는데 사용할 것을 권하지 않고 addEventListener를 사용할 것을 권장한다.
element.addEventListener(event, handlerFunction);- element: 이벤트를 연결할 HTML요소
- event: 연결하려는 이벤트의 종류를 나타내는 문자열
- 예: click, onclick, mouseover 등
- handlerFunction: 이벤트가 발생했을 때 실행할 함수
- 다음과 같은 예제는 아래 참고하자.
// html에서 버튼 요소 가져오기
cosnt button = document.getElementById("myButton");
// 버튼에 클릭 이벤트 핸들러 추가
button.addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
// 이벤트에 사용한 이벤트 핸들러 함수를 이용해서 추가한 이벤트를 삭제할 수 있다.
// 이벤트 삭제하기: removeEventListener
const button = document.getElementById("myButton");
function handleClick() {
alert("버튼이 클릭되었습니다!");
}
button.addEventListener("click", handleClick);
// 이벤트 핸들러 삭제
button.removeEventListener("click", handleClick);
// 이벤트 추가 정보 확인하기
const button = document.getElementById("myButton");
button.addEventListener("click", function(event) {
console.log("클릭된 요소: " + event.target.tagName);
console.log("마우스 위치: " + event.clientX + ", " + event.clientY);
if(event.target.tagName == "BUTTON") {
// 버튼이 클릭된 경우만 처리
alert("버튼이 클릭되었습니다!");
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
function f1() {
alert('f1');
}
window.onload = function () {
// onClick인 경우 이벤트 등록이 1개만
// addEventListener: 여러개 등록 가능
// 다음 코드는 2개 클릭이벤트를 등록하고 하나의 이벤트만 삭제
var b1 = document.getElementById('b1');
b1.addEventListener('click', f1);
b1.addEventListener('click', function () {
alert('f2');
});
b1.removeEventListener('click', f1);
};
</script>
</head>
<body>
<button id="b1">클릭</button>
</body>
</html>2. DOM을 이용한 element 추가하기
- 추가 버튼을 눌러서 htmlContainer에 새로운 html 추가하는 프로그램
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML 코드 추가 예제</title>
<script>
// DOMContentLoaded 이벤트 핸들러 등록
document.addEventListener('DOMContentLoaded', function () {
// 버튼 요소와 HTML컨테이너 요소 가져오기
const addButton = document.getElementById('myButton');
const htmlContainer = document.getElementById('htmlContainer');
// 버튼에 클릭 이벤트 핸들러 등록
addButton.addEventListener('click', function () {
// 추가할 HTML 코드 생성
const newHTML = `<div class = "added-content">
<p>새로운 HTML 코드입니다</p>
</div>
`;
// HTML 컨테이너에 새로운 HTML 코드 추가
htmlContainer.innerHTML += newHTML;
});
});
</script>
</head>
<body>
<h1>HTML 코드 추가 예제</h1>
<button id="addButton">HTML 코드 추가</button>
<div id="htmlContainer"></div>
</body>
</html>
IT 개발자가 되기 위한 기록