JavaScript event

이벤트

• 프로그램에 의해 감지되고 처리될 수 있는 동작이나 사건
• 키보드나 마우스 동작처럼 브라우저에서 발생하는 사건(순간)들
• 사용자가 발생시킬 수도 있고 응용프로그램이 발생시킬 수도 있음.

 

이벤트의 종류

프레임 이벤트, 폼 이벤트, 드래그 이벤트, 클립보드 이벤트, 프린트 이벤트, 미디어 이벤트 등 수많은 이벤트가 있다.

 

＊ Mouse Event

onClick	마우스로 해당 엘리먼트를 클릭함
onDbClick	마우스로 해당 엘리먼트를 더블클릭함
onMouseDown	마우스를 누름(클릭은 마우스를 눌렀다 때는 것으로 구별됨)
onMouseMove	마우스가 엘리먼트 위에서 이동함
onMouseOut	마우스가 엘리먼트에서 벗어남
onMouseUp	마우스를 똄(MouseDown과 반대 됨) 버튼을 누른 상태에서 떼는 경우

 

＊ keyboard Event

onKeyDown	키보드 버튼을 누르고 있는 경우 (어떤 키인지 읽으려면 함수를 호출하여 event.KeyCode를 참고해야 한다)
onKeyPress	키보드 버튼을 눌렀다 뗀 경우 (마우스의 클릭과 유사)
onKeyUp	키보드 버튼을 누르고 있다가 뗀 경우 (MouseUp과 유사)

 

＊ HTML Control Event

onBlur	엘리먼트가Focus(초점)를 잃음. 예를 들어 버튼을 클릭하면 포커스(점선테두리로 보임)가 버튼에 잡혀있는데 이 때 다른것을 클릭하거나 탭 등으로 포커스를 이동할 경우를 의미함
onChange	엘리먼트에서 특정 내용을 선택 혹은 변경하는 경우, 셀렉트박스(select box)에서 선택된 아이템을 변경하는 경우가 이에 해당됨
onFocus	엘리먼트에 초점이 맞춰지는 경우
onReset	리셋 이벤트가 발생하는 경우. 대표적으로 input box의 타입 reset이 적용될 때이다.
onSelect	엘리먼트 내 문자열을 블럭화 할 경우 (즉 드래그 혹은 쉬프트+방향키 등으로 문자열에 블럭을 씌우는 경우)
onSubmit	폼(form) 태그 내에서 전송 (Submit) 이벤트가 발생하는 경우

 

＊ window Events

onLoad	페이지나 이미지 등의 엘리먼트가 로딩이 완료되는 경우
onResize	윈도우나 프레임의 사이즈가 변경되는 경우
onUnLoad	온로드의 반대로서 페이지를 이탈하는 경우

 

---

 

요소에 이벤트를 바인딩하는 세가지 방법

 

 

1. HTML 이벤트 핸들러

＊onClick : on이 붙으면 Event Handler라고 한다.
＊꼭 함수를 만들어 사용해야 한다.

function happy(){
	alert('happy day');
}

<h3 id="heading1" onclick="happy()">좋은 날</h3>

 

onblur를 이용해 피드백 주기

＊ 함수기 때문에 window.onload를 안해줘도 된다.

function checkUsername() {                            
  var elMsg = document.getElementById('feedback');    
  var elUsername = document.getElementById('username');

  if (elUsername.value.length < 5) {                 
  	elMsg.textContent = 'Username must be 5 characters or more'; 
  } else {                                             
  	elMsg.textContent = '';                           
  }
}

<div id="page">
  <h1>List King</h1>
  <h2>New Account</h2>
  <form method="post" action="">

    <label for="username">Create a username: </label>
    <input type="text" id="username" onblur="checkUsername()" /><!-- onblur : 포커스를 잃었을때 -->
    <div id="feedback"></div>

    <label for="password">Create a password: </label>
    <input type="password" id="password" />

    <input type="submit" value="sign up!" />

  </form>
</div>

 

＊object.textContent

　innerHTML과 비슷하지만 텍스트만 로드 가능하다.

 

 

 

 

2. 전통적인 DOM 이벤트 핸들러

객체명.이벤트핸들러 = function(){
     // 처리코드;
};

//문서의 로딩이 끝났을 때 
window.onload = function () {
	alert('환영합니다.');
};

 

클릭 시 알럿 처리

window.onload = function(){
  var header = document.getElementById('header');

  header.onclick = function(){
    alert('클릭 시 처리');
    header.onclick = null; // 이벤트 제거
  }
};

<h1 id="header">Click</h1>

 

또 다른방법

header = document.getElementById('header');

  function change(){
    this.style.fontSize='50px';
    this.style.color='red';
    this.style.border='5px solid blue';
    this.style.transition='all .3s';
  };

header.onclick = change; // () 쓰면 에러

// 매개변수가 있을 때
btn.onclick = function(){
	aaa('매개변수1', '매개변수2');
};

 

 

 

 

 

3. DOM 레벨2 이벤트 리스너

• W3C에서 공식적으로 지정한 DOM Level 2 이벤트 모델
• 한 번에 여러 개의 이벤트 리스너 추가
• 이벤트 전달 방식 중 이벤트 캡처링 지원
• 이벤트를 1개 이상 사용 할 수 있는 이점이 있다.
• IE9 부터 지원

element.addEventlistener('이벤트', functionName, false);  // false는 생략 가능
element.addEventListener('이벤트', function(){functionName(10)}, false}; //매개변수 있을 때

//이벤트 제거
element.removeEventListener('이벤트', functionName, false);

window.onload = function(){
  //문서 객체 가져오기
  var button = document.getElementById('button');
  var heading = document.getElementById('heading');

  // 이벤트 리스너 whenClick1(), whenClick2() 작성
  function whenClick1(){
  	heading.innerHTML = '행복한 날';
  }
  function whenClick2(){
  	heading.style.color = 'blue';
  };

  //button 문서 객체의 click 이벤트에 이벤트 리스너 연결
  button.addEventListener('click', whenClick1); // on은 안됨
  button.addEventListener('click', whenClick2);

  // 추가되었던 이벤트 리스너 제거
  //button.removeEventListener('click', whenClick2);
}

<input id="button" type="button" value="이벤트" />
<h5 id="heading">좋은 날</h5>