이벤트

이벤트

이벤트란 브라우저에서 사용자의 조작이나 환경의 변화로 벌어진 사건을 말한다. 그리고 이러한 이벤트에 대해 즉각적인 반응을 할 수 있게 하는 것을 핸들러라고 부른다.

자바스크립트에서 이벤트 핸들러를 등록하는 방법은 세가지가 있다.

1. HTML 요소의 속성으로 등록하는 방법

<a href="#" onclick="alert();">링크</a>

2. DOM 요소의 프로퍼티로 등록하는 방법

window.onload = function() {
  var button = document.getElementById("button");
  button.onclick = 함수명;
}

3. addEventListener 메서드로 사용하는 방법

객체.addEventListener(이벤트, 함수명);

이벤트 객체

이벤트 객체는 이벤트가 발생하면 자동으로 생성되는 객체다.

속성	설명
target	이벤트를 일으킨 타겟의 요소를 반환
type	이벤트를 일으킨 이벤트 유형을 반환
returnValue	이벤트의 작업을 중지 true/false 중 하나
...	...

target속성
이벤트를 일으킨 요소를 반환

<script>
var btn = document.getElementById("user");
btn.addEventListener("keypress", func);

function func(e) {
  console.log(e.target);
} // 결과 : <input type="text" name="user" id="user">
</script>

type속성
이벤트를 일으킨 이벤트 유형을 반환하는 속성

<script>
var btn = document.getElementById("user");
btn.addEventListener("keypress", func);

function func(e) {
  console.log(e.type);
} // 결과 : keydown
<script>

returnValue속성
이벤트의 작업을 중지시킬 때 쓰임

<a href="http://google.com'token function">mclick(event)"></a>
<script>
  function mcliock(ev) {
    ev.returnValue = false;
  }
</sciprt>