개발자의 끄적끄적

[JavaScript] $(document).on과 $(document).ready의 차이 본문

개발/javascript & jquery

[JavaScript] $(document).on과 $(document).ready의 차이

효벨 2020. 6. 15. 02:00
728x90
반응형

[JavaScript] $(document).on과 $(document).ready의 차이

 

 

1. 첫 번째 문제 : click() 이벤트 선언과 소스 불러오기

 

  jQuery 셀렉터를 이용해서 버튼 클릭 이벤트를 만들어 주고 싶었는데 될 때가 있고 안 될 때가 있었다.

 

 이 문제는 간단 했다.

 

 html 소스를 두 개의 파일로 분리해서 사용하고 있었는데, 버튼이 있는 파일이 로드가 되기 전에 클릭이벤트를 선언해버리니,

 

인식을 못하고 있는 것이다.

 

 

해결방법: $(document).ready()

그래서 이때 나는 $(document).ready() {} 안에 클릭이벤트를 써서 해결하였다. 

 

근데 이렇게 해서 사용하다보니, 또 문제가 발생하였다.

 

2. 두 번째 문제 : 동적으로 생성되는 html 소스에 대한 click() 이벤트 문제

 

 위에서 해결하였던 click 이벤트로 ajax를 사용하여 데이터를 json으로 받아와 태그를 생성하고 바인딩을 하였다.

바인딩 할 때 button도 같이 생성이 되는데 이 버튼에 대한 click 이벤트는 먹히지 않았다.

 

 이런 문제가 발생하는 이유는 위의 첫번째 문제와 다름이 없다고 생각한다. click 이벤트가 이미 선언이 되어있고 사용되고 있는와중에 새로운 태그 동적으로 생성이 되었기 때문에 click 이벤트가 안 먹히는 것 이라고 생각했다. 

 

그래서 온갖 쇼를 다해봤다.

 

해결방법: click() 이벤트 함수로 만들어서 태그를 생성할 때 호출

문제발생: 함수 호출 중첩

 click이벤트를 함수로 만들어서 태그가 생성될 때 호출해 보았다.

되는 것 같았지만 생성된 태그 말고 기존에 있던 태그에는 안 먹히고 있었다.

 

 디버깅을 해보니... 안 먹히는게 아니라 click 이벤트가 두번 돌고 있어서 제대로 동작을 안하고 있던 것이었다.

호출된 함수가 계속 중첩되서 같이 호출 되고 있는 것이다.

 

 또 온갖 생쇼를 다했다.

 

 구글에서 '함수 중복호출', '함수 중첩', '함수 강제 종료' 등 말도 안되는 걸 검색하면서 찾아봐도 나같은 사례를 못봤다.

구글링 초보인가보다 ㅠㅠ

 

그러다 stackoverflow에서 답을 찾았다.

 

해결방법: $(document).on() {}

 

 

그야 말로 갓이었다. 고민하던 모든 것이 해결 되었다.

도대체 둘의 차이가 뭐였을까 ?

한번 알아보자

 

 

 

 

 

$(document).ready() VS $(document).on()

 

 

 

둘의 특징과 click 함수에 어떻게 적용이 되었길래 차이가 있던 것인지 살펴보자.

 

■ $(document).on()

 

  이 경우는 "이벤트를 위임"을 보여준다고 생각하면 된다. 

이 이벤트 핸들러(event handler)는 DOM트리 보다 위에 바인딩이 되어서 Selector와 일치하는 태그를 찾아 실행한다.

 

 대부분의 DOM 이벤트 들이 Tree의 꼭대기에서 시작해서 나뭇가지처럼 아래로 퍼지기 때문에 이것이 가능한 것이다. 

 

 그래서 해당하는 id의 태그를 클릭하면 클릭이벤트가 발생할 때 모든 부모 태그들의 사이를 이동하는 클릭 이벤트가 생성되고 그 부모 태그들과 조상 태그들은 그 이벤트를 받을 수 있게 된다.  

 

 즉 우리가 알고있는 DOM 트리(꼭대기가 html의 뿌리라고 볼수 있는 <html> 태그 부터 아래로 나뭇가지처럼 자식태그들이 형성이 되어 있고, 자식 태그 들이 없는 태그들(나뭇잎)까지 쭉쭉 뻗어 있는 듯한 모양)보다 위에서 이벤트를 위임받아 실행하기 때문에 어떤 태그가 동적으로 생성되더라도 그 이벤트를 인식을 할 수 있다는 것이다.

 

(DOM을 모르겠다면 -> 위키 백과: DOM이란? Click!)

 

■ $(document).ready()

 

 이 경우는 이벤트 핸들러(event handler)를 엘리먼트에 직접 바인딩을 한다. 엘리먼트에 직접 바인딩을 하기 때문에 지금 존재하는 태그들만 영향을 받고 새로 동적으로 생성되는 엘리먼트 들은 영향을 받을 수 없다. 

 

 쉽게 말하면 이 경우에서 click 함수를 전파할 때 알고있는 DOM의 엘리먼트 들에는 새롭게 생성된 태그들은 존재하지 않다고 알고 있기 때문이다.

 

 

■ 결론

 

 분명히 나처럼 이런 실수를 저지를 초보 개발자들이 많다고 생각한다.

DOM 객체와 이벤트에 대한 구조를 다시 한번 알아보고 쓴다면 그런 실수를 저지르지 않을 수 있다고 생각한다.

 

 

출처 : https://minkdak.tistory.com/5

반응형
저작자표시 비영리 변경금지

'개발 > javascript & jquery' 카테고리의 다른 글

[Ajax] 특정 Html 파일 삽입하기 및 Html파일내 특정 태그요소만 불러오기  (0) 2020.06.26
[javascript] swiper 예제  (0) 2020.06.17
[제이쿼리/jQuery] 요소 갯수 구하기 .length  (0) 2020.06.15
[jQuery] 체크박스 선택여부, checked처리 라디오버튼 선택과 해제  (0) 2020.06.12
[JavaScript] 시간 지연 함수, 일정 시간 뒤 실행시키기, SetTimeout() [펌]  (0) 2020.06.11
'개발/javascript & jquery' Related Articles more
Comments