jinsangYoo/javascript-basic-grammer-10.md

## javascript-basic-grammer-10.md

      
    Raw
  

              javascript-basic-grammer-10.md
            
          
    개요


javascript 재학습하면서 잊고 있던것, 긴가민가 했던것 재학습하면서 기록

이벤트


이벤트

키보드를 이용해 버튼을 입력하거나 마우스 클릭과 같이 다른것에 영향을 미치는 것


이벤트 연결

onload 속성에 함수 자료형을 할당하는 것을 의미


window.onload = function() {}

load: 이벤트 이름, 이벤트 타입 이라함
onload: 이벤트 속성

이벤트 리스너


이벤트 속성에 할당한 함수: 이벤트 리스너, 이벤트 핸들러
이벤트 리스너를 제거할 때: 이벤트 속성에 null 대입
이벤트 리스너 안에서 this 키워드를 사용하면 이벤트가 발생한 객체를 찾을 수 있음

this 키워드 외에도 이벤트 발생 객체를 찾는 방법이 있지만, 브라우져 마다 다름
다음 코드를 실행해보면 이벤트가 어디서 발생했고 타입이 무엇인지 등등, Alt, Shift, Ctrl을 함께 눌럿는지 마우스 X, Y 좌표등 이벤트와 관련된 모든 내용이 출력됨


<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <script>
    window.onload = function() {
      document.getElementById('header').onclick = function(e) {
        var event = e || window.event;

        document.body.innerHTML = '';
        for (var key in event) {
          document.body.innerHTML += '<p>' + key + ': ' + event[key] + '</p>';
        }
      };
    };
  </script>
</head>

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

IE8 이하의 버전은 이벤트가 발생할 때 이벤트 객체를 window.event 속성으로 전달하지만, 다른 브라우져는 이벤트 리스너의 매개변수로 전달함

IE9부터는 두 가지 방식 모두 사용 가능


이벤트 모델


정의: 문서 객체에 이벤트를 연결하는 방법

고전 이벤트 모델


이벤트 하나에 이벤트 리스너 하나만 연결 가능

인라인 이벤트 모델


<h1 onclick="alert('클릭');">Click</h1>

디폴트 이벤트 제거


일부 HTML 태그는 이미 이벤트 리스너가 있음

디폴트 이벤트라고 함


디폴트 이벤트 제거 방법

이벤트 리스너에서 false를 리턴하면 됨


<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <script>
    window.onload = function() {
      document.getElementById('my-form').onsubmit = function() {
          return false;
      };
    };
  </script>
</head>

<body>
  <form id="my-form">
      <label for="name">이름</label>
      <input type="text" name="name" id="name" /><br />
      <label for="pass">비밀번호</label>
      <input type="password" name="pass" id="pass" /><br />
      <label for="pass-check">비밀번호 확인</label>
      <input type="password" name="pass-check" id="pass-check" /><br />
      <input type="submit" value="제출" /><br />
  </form>
</body>

인라인 이벤트 모델을 사용할 때는 다음과 같이 "return 함수()" 형태로 입력 해야함

<body>
  <form onsubmit="return whenSubmit();">
  </form>
</body>
이벤트 전달


이벤트 버블링 방식

반대 개념: 이벤트 캡쳐링

IE, jQuery가 캡쳐링을 지원하지 않음


이벤트 전달을 막는 방법

IE: 이벤트 객체의 cancelBubble 속성을 true로 변경
else: 이벤트 객체의 stopPropagation() 메서드를 사용


window.onload = function() {
  document.getElementById('header').onclick = function(e) {
    var event = e || window.event;

    event.cancelBubble = true;
    if (event.stopPropagation) {
        event.stopPropagation();
    }
  };
};

cancelBubble를 검사하지 않는 이유

속성을 사용하는 것은 문제가 있을 수 있지만, 속성에 값을 입력하는 것은 오류가 발생하지 않으니 문제가 없음


DOM Level 2 모델


인라인 이벤트 모델, 고전 이벤트 모델은 한 번에 하나의 이벤트 리스너만을 가질 수 있음
이러한 DOM Level 0 이벤트 모델들의 단점을 보완하려고 만들어진 이벤트 모델

DOM Level 2 이벤트 모델

인터넷 익스플로러 모델

IE에서만 실행됨


표준 이벤트 모델


DOM Level 2 이벤트 모델이 DOM Level 0 이벤트 모델보다 나은 점은 여러번 이벤트를 추가할 수 있다는 것

같은 이벤트로도 여러번 이벤트를 추가할 수 있음
이벤트 연결한 순서대로 작동함


인터넷 익스플로러 모델

이벤트 연결


첫 번째 매개변수에 이벤트 속성을 씀
attachEvent(eventProperty, eventListener)

이벤트 연결


detachEvent(eventProperty, eventListener)

이벤트 제거


// window 객체에 attachEvent() 메서드로 load 이벤트를 연결
window.attachEvent('onload', function() { });
이벤트 제거


익명 함수를 이벤트 리스너로 사용한 이벤트는 제거할 수 없음

detachEvent() 메서드는 어떤 이벤트 리스너를 제거할지 명확하게 알려주어야 하기 때문


인터넷 익스폴로러 이벤트 모델에서 이벤트 리스너의 this 키워드는 이벤트 발생 객체를 의미 하지 않음

이벤트 리스너에서 this 키워드는 window 객체를 나타냄
이벤트 발생 객체를 사용하려면 이벤트 객체의 srcElement 속성을 사용해야 함


attachEvent()


attachEvent() 메서드는 IE에만 있으므로 다른 브라우져에서는 에러가 발생함
따라서 다른 브라우져일 경우 다음과 같이 조건문으로 해당 내용을 실행하지 않게 해줘야 함

window.onload = function() {
  var header = document.getElementById('header');
  if (header.attachEvent) {
    var handler = function() {
      window.event.srcElement.style.color = 'red';
      window.event.srcElement.detachEvent('onclick', handler);
    };
    handler.attachEvent('onclick' handler);
  }
};
표준 이벤트 모델


W3C에서 공식적으로 지적한 DOM Level 2 이벤트 모델
한번에 여러가지의 이벤트 리스너를 추가할 수 있음
이벤트 캡쳐링을 지원함

사실상 캡쳐링은 사용하지 않음


IE 9 부터 표준 이벤트 모델을 지원함

이벤트 연결


첫 번째 매개변수로 이벤트 이름을 씀
addEventListener(eventName, handler, useCapture = false)
removeEventListener(eventName, handler)

detachEvent()와 사용법 동일


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

  header.addEventListener('click', function () {
      this.innerHTML += '+';
  });
};

표준 이벤트 모델은 이벤트 리스너 안에서 this 키워드가 이벤트 발생 객체를 의미합니다.

인터넷 익스플로러 이벤트와 가장 결정적인 차이