EventHandler (jquery)

.on(events [,selector][,data],handler)

특정요소에 이벤트 바인딩 하기 위해 사용한다.
파라미터에 대해 알아보자.

events

events는 하나 이상의 공백으로 구분된 이벤트 유형 ‘click keydown’
.을 통해 커스텀한 이벤트 가능 ‘click.myPlugin’

selector

이벤트를 트리거하는 선택된 요소의 하위항목이다.

예를 들어 div안에 여러 버튼이 있는 경우 일일히 버튼마다 이벤트를 걸지않고
div에 이벤트를 걸고 버튼속성에 이벤트를 트리거한다.
이럴 때 참 유용한 것 같다.

1
2
3

$('[data-container=div]').on('click', '[data-button]', (e) => {
  const type = $(e.currentTarget).attr('data-button'); // 각 버튼의 속성값이 들어온다.
});

data

이벤트가 트리거 될 때 핸들러로 전달될 데이터이다.

1
2
3

$('#div').on('click', {msg: 'message'}, (e) => {
    console.log(e.data.msg); // message
});

handler

이벤트가 트리거 될 때 실행될 함수이다.

이 외에도 on함수로 여러개 이벤트 등록할 수도 있다.

1
2
3
4
5
6

$('#div').on({
  mouseenter: function() {
  },
  mouseleave: function () {
  },
})

또한 보통 코드를 작성할 때 이미 이벤트가 있는 경우를 대비해서 한번 초기화(off)하고서 이벤트를 다시 건다(on).

1
2
3

$('#div').off('click').on('click', () => {

});