DOM에서 이벤트 처리하기
DOM 이벤트란 사용자가 해당 페이지에서 하는 모든 행위를 뜻한다.
이벤트 :
클릭이나 더블클릭, 마우스휠로 페이지를 위 아래로 이동하거나 태그 위에 마우스를 올리는 등 모든 행위
자바스크립트에서 이벤트를 실행시키려면 이벤트 처리기(event handler)를 연결해야한다.
(실무에서는 이벤트 핸들러, 핸들러라고 한다)
html 태그에 직접 이벤트 핸들러를 연결시킬 수도 있지만 태그와 스크립트 소스가 섞여있어서 복잡한 프로그램에는 적합하지 않다.
이럴 때 자바스크립트 내부에서 이벤트 핸들러를 연결하면 html태그와 스크립트 소스를 완전히 분리시킬 수 있다.
[기본형]
< 1. 해당 요소에 이벤트를 직접 적용하기 >
요소명.on이벤트명 = function(){ 자바스크립트 코드; }
-------------------------------------------
: 위 기본형은 해당 요소에 이벤트 1개를 직접 적용할 때 사용한다. 다른 태그에는 해당 이벤트가 적용되지 않는다.
on행위하면 옆에 함수가 실행된다.
===============================================================================
< 2. 함수명을 이용해 이벤트를 연결하기 >
변수명1 = 요소선택
function 이벤트명(){
자바스크립트 코드;
}
변수명1.이벤트명 = 함수명호출;
------------------------------------------------
: 이벤트를 함수로 등록한다. 이 이벤트는 분리해서 썼기때문에 여러 태그에 동시에 적용할 수 있다.
※이 경우에는 함수호출할 때 함수명 뒤에 ()를 붙이지 않는다.※ 2번째 방법으로 함수명을 이용해 이벤트를 연결할 때는 함수 호출할 때 함수명 뒤에( )가 붙지 않는다.
1. 해당 요소에 이벤트를 직접 적용. 이 해당요소에만 쓸 수 있다.
<img src="./img/bed.jpg" alt="침대" width="400" id="image1" />
<img src="./img/coffee.jpg" alt="커피" width="400" id="image2" />
const imgTag1 = document.querySelector("#image1");
//이미지1를 클릭하면 함수를 호출해서 실행해라. imgTag1에만 적용
imgTag1.onclick = function () {
alert("이미지를 클릭했습니다");
};
2. 함수명을 이용해 이벤트 연결. 함수를 바깥에 빼놨어서 다른 요소에도 적용할 수 있다.
<img src="./img/bed.jpg" alt="침대" width="400" id="image1" />
<img src="./img/coffee.jpg" alt="커피" width="400" id="image2" />
const imgTag2 = document.querySelector("#image2");
//이미지를 클릭하면 imgTag2의 src 속성을 alert 창으로 출력해주는 함수
function clickImage() {
alert(imgTag2.getAttribute("src"));
}
//imgTag2를 클릭하면 clickImage 함수 호출해서 실행/ 함수명으로 이벤트를 실행할 때에는 함수명 뒤에 ()를 붙이지 않는다.
imgTag2.onclick = clickImage;
