jquery 이벤트

jquery를 공부하면서 알게 된 이벤트에 대해서 정리해보자

1. on / off 차이

element에 이벤트를 정의할 때는 on을 사용한다.
on의 첫번째 인자에는 object형태로 여러개의 이벤트들이 바인딩 될 수 있다.
두번째 인자는 선택한 요소의 자손을 필터링하여 이벤트를 트리거한다.
off는 이벤트 핸들러를 제거할 때 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//기본 사용법 
element.on('click', function() {
});
//여러 이벤트 바인딩 
element.on({ 
  'click' : function(){...},
  'onchange' : function(){...} 
});

// bad code : 이벤트 바인드 개수가 li 요소 개수만큼 비효율적 
$("ul li").on("click", function(){
});
// good code : ul 태그 하나에 이벤트를 붙인다. 하나의 이벤트 바인딩 
$('ul').on('click', 'li', function() {
});

//이벤트 핸들러 제거 
element.off('click', function() {
});

작업을 하던 도중 이벤트가 트리거 될때가 있었다. 이 때는 on/off를 사용하여 해결하였다.
클릭을 할 때마다 이벤트가 두번 발생하여 아래와 같이 해결하였다.
이 외에도 여러 방법들이 있다.
참고: https://stackoverflow.com/questions/3070400/jquery-button-click-event-is-triggered-twice

1
2

element.off().on('click', function() {
});

2. css에서 이벤트 막기

여러개의 태그가 겹쳐져있을 때 특정 태그에 이벤트를 제거하고 싶을 때가 있다.
이 때 pointer-events: none;으로 css속성을 주면 된다.
그러나 이 속성은 IE 10이하에서는 안된다고 한다.
대체 방법으로는 일일히 태그 찾아서 해당 이벤트일 때마 액션을 취해야한다.

3. input이벤트

input을 실시간으로 이벤트를 감지할때 react에서는 onchange이벤트를 사용했다.
그러나 자바스크립트에서 onchange는 포커스가 해제될 때 발생을 한다. keyup같은 경우는
특정 모바일이나 디바이스에 따라 문제가 있다.
jquery의 input 이벤트는 input이나 textarea요소에 값이 변경이 되면 동기적으로 발생하는 이벤트이다.
모던 브라우저에서 모두 작동을 하나 IE8이하에서는 작동하지 않는다.