[서적] Do it ! 시리즈/Do it! 자바스크립트 입문

[Do it! 자바스크립트 입문] 12 - 5장 이벤트(event)와 이벤트 처리기(event Handler), click, mouseover, mouseout

다두디다 2022. 2. 18. 20:40
728x90

05 - 5 이벤트 다루기

 

#1 이벤트(event)

 

자바스크립트에서 이벤트란 웹 브라우저나 사용자가 행하는 어떤 동작을 말합니다.

 

↓↓↓ 이벤트 목록 모음 ↓↓↓

 

https://developer.mozilla.org/en-US/docs/Web/Events

 

Event reference | MDN

Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events

developer.mozilla.org

 

#2 이벤트 처리기(event Handler)

 

이벤트와 이벤트 처리 함수를 연결해 주는 것으로,

이벤트 처리기는 이벤트 이름 앞에 'on'을 붙여 사용합니다.

 

#3 <button>태그에 이벤트 처리기로 함수 연결하기

 

 

<button>태그에 onclick = "alert('버튼을 눌렀습니다.')" 를 추가하면

이렇게 이벤트 처리기와 실행할 함수가 연결되어 동적인 효과를 만들 수 있습니다.

 

속성 설명
onclick 마우스로 눌렀을 때 이벤트 발생
onmousevoer 마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생

 

#4 여러 이벤트 처리기 연결하기

 

1. click 이벤트

 

html
js

 

var coverImage = document.querySelector("#cover"); 

=> 변수 지정 후 html에 "#cover" id태그 불러오기

 

coverImage.onclick = function(){

    alert("눌렀습니다.");
    };
=> 변수 coverImage를 클릭할 시 함수 실행
 

 

2. mouseover, mouseout 이벤트

 

 

coverImage.onmouseover = function(){
      coverImage.style.border = "5px solid #000";
};

=> 변수 coverImage에 마우스 올렸을 시 함수 실행

 

coverImage.onmouseout = function(){
      coverImage.style.border = "";
};

=> 변수 coverImage에 마우스 내렸을 시 함수 실행

mouseover
mouseout

728x90