javascript-DOM에서 이벤트 처리하기
DOM에서 이벤트 처리하기
DOM 이벤트란 사용자가 해당 페이지에서 하는 모든 행위를 뜻한다.
즉, 클릭이나 더블클릭, 마우스휠로 페이지를 위 아래로 이동하거나 태그위에 마우스를 올리는 등 모든 행위를 '이벤트'라고 한다.
자바스크립트에서 이벤트를 실행시키려면 이벤트 처리기(event handler)를
연결해야 한다.
html태그에 직접 이벤트 헨들러를 연결시킬 수도 있지만 태그와 스크립트 소스가
섞여 있어 복잡한 프로그램에는 적합하지 않다.
이럴때 자바스크립트 내부에서 이벤트 핸들러를 연결하면 html태그와 스크립트 소스를 완전히 분리시킬 수 있다.
[기본형]
1.해당 요소에 이벤트를 직접 적용하기.
요소명.이벤트명 = funtion(){자바스크립트 코드;}
: 위 기본형은 해당 요소에 이벤트 1개를 직접 적용할 때 사용한다.
다른 태그에는 해당 이벤트가 적용되지 않는다.
<body>
<img src="./img/rose.jpg" alt="rose" width="200" />
<script>
/*
[기본형]
요소명.on이벤트명 = funtion(){자바스크립트 코드;}
*/
const imgTag = document.querySelector("img");
//이미지를 클릭하면 함수를 실행한다.
imgTag.onclick = function () {
alert("이미지를 클릭했습니다.");
};
</script>2.함수명을 이용해 이벤트를 연결하기
변수명1 = 요소선택
변수명1.이벤트명= 함수호출; <- 소괄호 x
function 이벤트명(){
자바스크립트 코드;
}
:이벤트를 함수로 등록한다. 이 이벤트는 여러 태그에 동시에 사용할 수있다.
안녕하세요