[TIL] Javascript - $(document).on vs $(document).ready

작성일 | In |

JavaScript Trouble Shooting

$(document).on vs $(document).ready

  • script단에서 다음과 같은 코드를 사용할 일이 생겼다.
1
2
3
4
5
6
7
$(".A").click(function(){
    // 여기서 B 클래스를 생성 
});

$(".B").click(function(){
    // do something
});
  • A 클래스를 클릭하면 B 클래스를 가지는 요소들을 동적으로 생성해준다.
  • 문제점 : B 클래스는 잘 생성해주었으나, B 클래스를 클릭했을 때 어떠한 일도 일어나지 않았다

해결방법 : $(document).on

1
2
3
$(document).on("click", ".B", function(){
    // do something
});
  • 위와 같이 $(document).on을 사용하니 말끔하게 해결이 되었다.

WHY?

  • $(document).on
    • 이 이벤트 핸들러(event handler)는 DOM트리 보다 위에 바인딩이 되어서 selector와 일치하는 태그를 찾아 실행한다.
    • 그래서 해당하는 class의 태그를 클릭하면 클릭이벤트가 발생할 때 모든 부모 태그들의 사이를 이동하는 클릭 이벤트가 생성되고 그 부모 태그들과 조상 태그들은 그 이벤트를 받을 수 있게 된다.
    • 즉 우리가 알고있는 DOM 트리보다 위에서 이벤트를 위임받아 실행하기 때문에 어떤 태그가 동적으로 생성되더라도 그 이벤트를 인식을 할 수 있다는 것이다.
  • $(document).ready
    • 이 경우는 이벤트 핸들러(event handler)를 엘리먼트에 직접 바인딩을 한다. 엘리먼트에 직접 바인딩을 하기 때문에 지금 존재하는 태그들만 영향을 받고 새로 동적으로 생성되는 엘리먼트 들은 영향을 받을 수 없다.
    • 쉽게 말하면 이 경우에서 click 함수를 전파할 때 알고있는 DOM의 엘리먼트 들에는 새롭게 생성된 태그들은 존재하지 않다고 알고 있기 때문이다.

느낀점

  • 글을 읽으면서 ‘으흥, 으흥…’ 하면서 이해하는 척 넘어갔지만, 아직 100% 이해했다고 보기는 어렵다.
  • on에서 ‘위임’이라는 것이 잘 이해되지는 않지만, 그래도 ready에서 지금 존재하는 태그들만 영향을 받고, 새롭게 생성된 태그는 존재하지 않다고 알고 있다는 것은 이해가 되었다.

  • 이렇게 알게 되었으니, 앞으로는 구분해가며 사용해야겠다.

  • 참조 블로그
    • [https://minkdak.tistory.com/5]