[html & javascript] 가상요소 이벤트 바인딩 (template 태그)

html

<div class="js__detail"></div>

<template type="text/template" class="js__template>
    {basic_img}
</template>

 

js

$(".js__template").find("img").on("load error", function () {
    이벤트 실행(); //1번 내용 참고
})

$(".js__detail").append("js__template"); //2번 내용 참고

1번
1번에서의 이벤트 실행()은 img가 아직 가상태그이기 때문에 load, error 이벤트가 바인딩되었을 뿐 아직 실행 전이다. 따라서 함수 안의 이벤트 실행함수도 당연히 실행 전이다.

2번
js__detail에 가상요소였던 template 태그가 append되었다. 따라서 진짜 태그가 되었으므로 이때 로드체크하고 이벤트가 실행된다.

** 따라서 언뜻 보기에는 1번 실행 후 2번이 실행될 것 같지만 바인딩만 된 상태이기 때문에 append 된 이후에 1번이 실행된다. (vue의 v-if 같은 느낌이라고 생각해도 된다.)