앞서 살펴본 방법은 두가지였습니다.
hmtl 파일 안에서 만들기 / html 파일 안에서 일부 + JS 파일에서 일부 만들기
이번에는 JS 파일에서만 작성하여 동작시키는 방법을 알아보겠습니다.
그러기 위해서 필요한 것은 .addEventListener() 라는 함수입니다.
이 함수는 어떤 객체 뒤에 꼬리표로 붙여 사용하는 메소드입니다.
그렇다면 어떤 객체 뒤에 붙일까요?
네, 우리가 제어하길 원하는 html 객체 뒤에 붙입니다.
그러면 그 객체에다 이벤트가 발생시 할일을 하는 함수 '이벤트 핸들러'를 등록해줍니다.
그런데 앞에서 말했듯이 html파일은 건드리지 않는다고 했습니다.
즉 html파일은 건드리지 않고 js파일 내에서 리모컨으로 조종하듯 html의 요소를 요리조리 제어하는 겁니다.
형식은 이렇습니다.
객체.addEventListener(이벤트명, 함수이름)
실제 코드를 볼게요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button name="red" class="fruit" id="apple">apple</button>
<button name="yellow" class="fruit" id="banana">banana</button>
<button name="red" class="vegetable" id="carrot">carrot</button>
<button name="white" class="vegetable" id="onion">onion</button>
<p id="text"></p>
<script src="index.js"></script>
</body>
</html>// JS 파일입니다.
// 1. html문서에서 아이디가 "carrot"인 요소를 선택
var carrot_btn = document.getElementById('carrot');
var btn1 = document.getElementById('apple');
var btn2 = document.getElementById('banana');
var btn3 = document.getElementById('onion');
// 2. click 할 시 텍스트를 보여주는 함수
// 버튼을 클릭하면 "토끼가 나타났어요!!" 문장을 출력하도록 해보세요
function hideText() {
document.getElementById("text").innerHTML = "";
};
// 3. 선택한 요소에 "click" 이벤트 핸들러를 등록 (이벤트명:"click", 함수이름)
// carrot_btn.addEventListener("click", showText) ;
btn1.addEventListener("click", hideText);
btn2.addEventListener("mouseover", hideText);
btn3.addEventListener("click", hideText);
// 아니면 아래처럼 직접 함수를 넣어줄 수도 있다.
carrot_btn.addEventListener("click", function showText(){
document.getElementById("text").innerHTML = "토끼가 나타났어요!!";
})
등록할 수 있는 이벤트로는 "click", "mouseover" 같이 기본적으로 많이 쓰이는 것을 포함해서 아래와 같이 다양합니다.
- "click": 클릭 이벤트
- "dblclick": 더블 클릭 이벤트
- "mouseover": 마우스 오버 이벤트
- "mouseout": 마우스 아웃 이벤트
- "mouseenter": 마우스 진입 이벤트
- "mouseleave": 마우스 이탈 이벤트
- "keydown": 키 다운 이벤트
- "keyup": 키 업 이벤트
- "keypress": 키 누름 이벤트
- "input": 입력 이벤트
- "change": 변경 이벤트
- "submit": 폼 제출 이벤트
- "focus": 포커스 이벤트
- "blur": 포커스 아웃 이벤트
- "scroll": 스크롤 이벤트
- "resize": 리사이즈 이벤트
- "load": 로드 이벤트
- "unload": 언로드 이벤트
- "dragstart": 드래그 시작 이벤트
- "dragend": 드래그 종료 이벤트
'인간은 어떻게 배울까' 카테고리의 다른 글
| [JS] 타이머 timer (0) | 2023.06.01 |
|---|---|
| [JS] 이벤트 리스너를 이용해서 속성을 껐다 켰다하기 (toggle) (0) | 2023.06.01 |
| [JS] 버튼 누르면 동작하기, 이벤트 핸들러 (0) | 2023.05.31 |
| [JS] DOM 에서 innerHTML과 contentText의 차이 (0) | 2023.05.31 |
| [JS] 문자를 숫자로, 숫자를 문자로. 간단히 하는 방법 (0) | 2023.05.31 |
