[코드 컨펌]_Template 부분_(Feat. TAB구현 심화)

기존 코드 ]

$("#" + tabclosename).click(function () {
// create 한 template 노드에 해당 아이디를 가진 버튼에 리스너를 Jquery 를 이용하여 부여

});

$(document).on("click", "#" + tabname, function () {
    // 문서 전체를 기준으로 해당 아이디를 가진 a 테그에 이벤트 부여
});

수정코드]

node.querySelector('a').onclick = function(){
//a 태그 이벤트 부여

}
node.querySelector('input[type=button]').onclick = function(){
//여기에 닫기버튼 이벤트 부여
}

핵심]

// 템플릿 만드는 곳
let node = document.createElement('li');
node.classList.add(menuname);

let tabname = menuname + 'tab';
let tabclosename = menuname + 'close';
let id = $random.random();

const template = `<span class="tabmenulist" id="\${id}">
    <a href="javascript:void(0);"  id="\${tabname}"}">\${name}</a>
    <input type="button" id="\${tabclosename}" value="닫기"}"></input>
    <span>`

node.innerHTML = template;

우선 node를 만들어서 li 태그를 만든다음에

token 개념의 menuname을 부여한다.

 

그리고 나서 템플릿 을 원하는방법으로 만들고 innerHTMl로 적용시킨다고 생각하면된다.

 

여기서 예전 코드는 다만들고나서 이후에 jquery로 문서 전체를 기준으로 또 탐색한 것이고

아래의 코드는 생성과 동시에 이벤트를 부여한다. 여기서node안의 템플릿을 기준으로 찾게 되니 좀더 가독성이 올라갔다.

 

다음에 node 관련 코드 작성시 도움이 될거같다.