[JavaScript] 자바스크립트 이벤트 리스너 - 추가 정보 전달
2020. 9. 1. 18:28
addEventListener 메서드의 두 번째 인수를 이벤트 리스너라고 부른다. 이 이벤트 리스너는 함수이고 함수의 인수로 이벤트 객체를 받는다는 것을 계속해서 설명해왔다. 이벤트 리스너에 대해 기본적인 부분을 알고 싶다면 이 글을 참고하자.
이벤트 객체를 받는 코드는 다음과 같다.
window.onload = function () {
let button = document.getElementById("btn3");
button.addEventListener("mouseover", function (e) {
e.currentTarget.style.backgroundColor = "blue";
}, false);
};이처럼 이벤트 객체 e를 통해 우리는 이벤트를 호출한 DOM 요소의 버튼 색상을 파란색으로 변경할 수 있다. 근데 위와 같이 사용한다면 다른 색으로 변경하고 싶을 때마다 직접 코드를 수정해야한다. 만약 사용자가 직접 선택한 색으로 버튼 색상을 노출하고 싶다면?? 이 때 그 색상을 이벤트 객체 외에 색상값을 리스너에 전달할 수 있다면 해결할 수 있을 것이다. 아래 코드에서 그 기능을 확인할 수 있다.
익명 함수 안에서 실행
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
let button = document.getElementById("btn");
// 3. 해당 값을 사용
function changeBgColor(e, color) {
e.currentTarget.style.backgroundColor = color;
}
button.addEventListener("click", function (e) {
// 2. 익명함수 안에서 함수 호출 시 이벤트 객체와 원하는 파라미터 전달
changeBgColor(e, getColor());
}, false);
};
// 1. selectbox에서 색상 변경
function getColor() {
let selectedColor = document.getElementById("colorBox")
.options[document.getElementById("colorBox")
.selectedIndex].value;
return selectedColor;
}
</script>
</head>
<body>
<select id="colorBox">
<option value="" selected>선택</option>
<option value="red">red</option>
<option value="blue">blue</option>
</select>
<button id="btn">버튼</button>
</body>
</html>
함수 선언문으로 정의한 함수이름으로 넘기기
위 코드의 자바스크립트를 아래와 같이 수정했다. 이렇게 수정하니 조금 더 가독성이 올라갔다.
window.onload = function () {
let button = document.getElementById("btn");
button.addEventListener("click", changeBgColor, false);
function changeBgColor(e) {
let selectedColor = document.getElementById("colorBox")
.options[document.getElementById("colorBox")
.selectedIndex].value;
e.currentTarget.style.backgroundColor = selectedColor;
}
};'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| [JavaScript] 자바스크립트 비동기 처리와 AJAX, promise(프로미스) (0) | 2020.09.07 |
|---|---|
| [JavaScript] 자바스크립트 콜백함수(callback function) (0) | 2020.09.03 |
| [JavaScript] 자바스크립트 이벤트 리스너 안의 this (0) | 2020.09.01 |
| [JavaScript] 자바스크립트 이벤트 전파 (0) | 2020.08.31 |
| [JavaScript] 자바스크립트 이벤트 객체 (0) | 2020.08.31 |
이 글을 공유합시다
