[JavaScript] Chapter 20. 이벤트

이벤트 (Event)

• 시스템에서 일어나는 사건

마우스 이벤트 (mouse event)	설명
click, doubleclick	클릭 / 더블클릭
mousedown	마우스 누를 때
mouseup	눌렀던 마우스 땠을 때
mouseover	요소 위로 마우스 올렸을 때
mouseout	요소 밖으로 마우스 움직였을 때

포커스 이벤트 (focus event)	설명
focus	포커스 얻음
blur	포커스 잃음

기타 이벤트 (etc event)	설명
submit	폼 전송
resize	사이즈 조절
select	텍스트 선택
scroll	스크롤 기능
change	폼 변경

 

이벤트 핸들러

• 이벤트를 다룸
• 이벤트 발생 시, 실행되는 코드
• 이벤트를 JS에서 인식하여 사용하게 함 = 이벤트 리스너

 

이벤트 핸들러 표기법

on + 이벤트명

onclick  // ex

• on + 이벤트명
• 모두 소문자 표기

 

<button type="button" id="btnsave" onclick="fnSave();">저장</button>

<input type="text" id="focusTest1" onchange="fnChangeBg();" />
<button type="button" id="btnFocus" onclick="fnFocusOn();">포커스On</button>
<button type="button" id="btnFocus" onclick="fnFocusOff();">포커스Off</button>

<script>
    function fnSave() {
        alert("저장 되었습니다!");
    }
    function fnChangeBg() {
        document.getElementById("focusTest1").style.backgroundColor = "yellow";
    }
    function fnFocusOn() {
        document.getElementById("focusTest1").focus();
    }
    function fnFocusOff() {
        document.getElementById("focusTest1").blur();
    }
</script>

 

이벤트 등록

• 이벤트 핸들러(리스너)를 통해 함수 등록

이벤트 객체

• 이벤트가 일어나는 것 그 자체
• 이벤트의 기능 및 속성 제공 => event

var button = document.getElementById("btn");
button.addEventListner("click",  fnName);  // 이벤트 등록, 이벤트 객체

function fnName(event) {
    console.log(event.target);
    console.log(event.currenTarget);
}