여러개 요소에 여러개 이벤트 바인딩 하기

여러개의 요소를 셀렉트하는 방법은

$('AAA BBB CCC').on('XXX', function () {
  // (X) 요소사이에 ',' 를 넣어주어야됩니다.
});

$('AAA, BBB, CCC').on('XXX', function () {
  // (O) aaa,bbb,ccc 의 요소를 한번에 잡을 수 있습니다.
});

이벤트를 바인딩하는 방법을 보여드리면

$('AAA').click(function () {
  //하나의 이벤트 밖에 바인딩할 수 없습니다.
});

하지만  Jquery 1.7 부터는  .bind() 나  .click() 메소드를 사용해도, 내부적으로  .on()  메소드를 이용하여 이벤트 핸들러와 바인딩합니다.

 .on() 메소드는 다음과 같은 특징을 가지게 됩니다.

1. 선택한 요소에 어떤 타입의 이벤트라도 연결할 수 있습니다.

2. 하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결할 수 있습니다.

3. 선택한 요소에 여러 개의 이벤트 핸들러와 여러개의 이벤트를 같이 연결할 수 있습니다.

4. 사용자 지정 이벤트(custom event)를 위해 이벤트 핸들러로 데이터를 넘길 수 있습니다.

5. 차후에 다루게 될 요소를 이벤트에 바인딩할 수 있습니다.

우선 위 주제처럼 여러 개의 이벤트를 연결 시키는 방법은

$('AAA').on('click, touchstart', function () {
  // (X) 위와 다르게 각 이벤트마다 ','를 써줄 필요가 없습니다.
});

$('AAA').on('mousedown touchstart', function () {
  // (O) 'AAA' 요소에 mousedown 이벤트와 touchstart 이벤트가 적용됩니다.
})

$('AAA').on({
  click: function () {
    // 이벤트 내용
  },
  mouseenter: function () {
    // 이벤트 내용
  },
  keydown: function () {
    // 이벤트 내용
  }
});