자바스크립트 이벤트 바인딩

728x90

1.Event binding

루트 요소의 특정 집합을 기반으로 지금 또는 나중에, 선택과 일치하는 모든 요소에 대해 하나 이상의 이벤트 처리기를 묶는 것을 말한다.

1.1 HTML Event Handler

더이상 사용되지 않으며 HTML과 JavaScript를 분리 되어있어야 한다.

결과

1.2 전통적(Traditional) DOM Event Handler

HTML Event Handler처럼 Html과 JavaScript가 혼용되는 문제는 해결되었으나 이벤트 핸들러에 하나의 함수만 바인딩 할 수 있으며 함수에 인수를 전달할 수 없는 단점이 있다.

<html>

<body>

  <button id='btn'>Click me</button>

  <script>

    var btn = document.getElementById('btn');

    btn.onclick = function() {

      alert('Button clicked!');

  </script>

</body>

</html>

결과

1.3 DOM Level 2 Event Listener

Event Listener는 이벤트를 처리하는 가장 최신의 기법이다. 이벤트 리스너를 이용하여 대상 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수를 지정한다.

<html>

<body>

<script>

addEventListener('click', function() {

alert('Clicked!');

});

</script>

</body>

</html>

위와 같이 대상요소(element)를 지정하지 않으면 click이벤트는 전역객체인 window에 바인딩된다.

<!DOCTYPE html>

<html>

<body>

  <label for='username'>User name </label>

  <input type='text' id='username'>

  <script>

    var elem = document.getElementById('username');

    elem.addEventListener('blur', function() {

      alert('blur event occurred!');

});

  </script>

</body>

</html>

결과

(blur 이벤트:요소가 포커스를 잃었을 때)

input 요소를 blur 이벤트에 바인딩하였다. 사용자 이름이 최소 2자 이상이여한다는 규칙을 세우고 이에 부합하는치 확인하는 처리 예제를 통해서 이어나가보자.

<html>

<body>

  <label for="username">User name </label>

  <input type='text' id='username'>

  <em id='message'></em>

  <script>

    var elem = document.getElementById('username');

    var msg  = document.getElementById('message');

    elem.addEventListener('blur', function() {

      alert('blur event occurred!');

      if(elem.value.length < 2) {

        msg.innerHTML = '이름은 2자 이상이어야 합니다';

      } else {

        msg.innerHTML = '';

});

  </script>

</body>

</html>

결과-1

결과-2

문제는 2자 이상이라는 규칙이 바뀌게 되면 모든 코드를 수정해야하기 때문에 2자이상이라는 규칙을 상수화 화고 함수의 인수로 전달하는 방식으로 수정하도록 한다.

그런데 addEventListener 메서드의 두번째 매개변수는 이벤트가 발생했을 때 호출될 함수이다.

이대 두번째 매개변수에는 함수 호출이 아니라 함수 자체를 지정하여야 한다.

function foo() {

  alert('clicked!');

elem.addEventListener('click', foo);     // 이벤트 발생 시까지 대기한다

따라서 전통적 DOM Event Handler 방식과 같이 함수에 인수를 전달하지 못하는 문제가 발생한다. 이를 위해 조금 우회할 수 있는 방법을 쓴다.

const MIN_USER_NAME_LENGTH = 2; // 최소 이름 길이

var elem = document.getElementById('username');

var msg  = document.getElementById('message');

function checkUserNameLength(n) {

  alert('blur event occurred!');

  if(elem.value.length < n) {

    msg.innerHTML = '이름은 ' + n + '자 이상이어야 합니다';

  } else {

    msg.innerHTML = '';

elem.addEventListener('blur', function() {

  checkUserNameLength(MIN_USER_NAME_LENGTH);

});

728x90

자바스크립트 턴제 게임 만들기 (3)	2016.12.15
javascript 테트리스 만들기 (0)	2016.12.13
javascript 함수-1 (0)	2016.01.14
PHP [phpMyadmin 처럼 만들어 보기] table 검색/insert/update/delete (0)	2015.10.23
php mysql 테이블을 검색/컬럼 및 데이터 출력 (0)	2015.10.22

캉군