2017-01-10 1 views
0

jQuery를 사용하는 SPA에서 작업 중이며 입력 필드 (체크 상자, 드롭 다운, 텍스트)의 특정 값에 대한 작업을 트리거해야한다는 요구 사항 중 하나입니다. 나는jQuery를 사용하여 양식의 모든 입력 필드를 청취하십시오.

$('input, select').on('click focus change', function(e){ 
//do something 
}); 

나 또한

$('form').on('click focus change', 'input, select', function(e){ 
//do something 
}); 

이 페이지에 비동기 작업이있을 것이라는 점을 주어, 두 번째 옵션은 무엇입니까 빠르거나 덜 복잡 다음의 성능 관점에서 알고 싶어 나는 앞으로 기울고 있지만 전문가들과 확인하고 싶습니다.

+2

처음에는 약간의 오버 헤드가 있지만 중요한 것은 아닙니다. 두 번째 이점은 페이지가로드 될 때 페이지에있는 필드뿐만 아니라 동적으로 생성 된 필드에서도 작동한다는 것입니다. – nurdyguy

답변

1

두 번째 발췌 문장은 전체 양식에 이벤트를 첨부합니다. 사용자가 아무 곳이나 클릭 (특히 클릭)하면 클릭/포커스/변경하면 이벤트가 발생합니다. 화재가 발생하자마자 입력이 끝나거나 선택되었는지 확인한 후 중지합니다. 결과적으로, 두 번째 버전은 비 입력/선택 이벤트에 대해 때때로 발생하기 때문에 약간 더 높은 오버 헤드를 갖습니다.

두 번째 형식의 가장 큰 이점은 동적으로 생성 된 요소 때문입니다. 사용자가 수행하는 작업으로 폼에 추가 필드가 만들어지게됩니다. 페이지가 처음로드 될 때 해당 필드가 페이지에 없으면 해당 필드가 변경/클릭 될 때 이벤트의 첫 번째 버전이 실행되지 않습니다. 그러나 두 번째 버전 입니다.

내 추천 : 내가 설명한 것처럼 동적 필드를 사용하여 구체적으로 작업하지 않는 한 먼저 사용합니다. 솔직히 그래도 괜찮은 작은 차이가 있습니다.

+0

설명 주셔서 감사합니다! – ultimatecoder

1

성능면에서 집에 관해 많이 쓰지 않습니다. 차이 (있는 경우)는 무시할 수 있습니다. 비동기 작업의 경우 2 단계 발췌문을 제안합니다.

관련 문제