스크립트 이벤트 질문점요
본문
초보적인 질문일수도있는데요~
동적 버튼 추가시 추가된 버튼 이벤트 할당위치 가르쳐 주실분 ㅠㅠ
<div id="test_wrap">버튼 추가 영역</div>
<button id="testBtn">버튼추가</button>
<script>
const testBtn = document.querySelector("#testBtn");
testBtn.addEventListener("click", ()=>{
let tmpBtn = document.createElement("button");
tmpBtn.id = "addBtn";
let btnTxt = document.createTextNode("추가버튼");
tmpBtn.appendChild(btnTxt);
document.querySelector("#test_wrap").appendChild(tmpBtn);
});
</script>
위는 테스트용이라 막코딩인데요...
버튼은 생성하겠는데... 안에있는 버튼에 이벤트를 추고 싶은데요
저럴때는 이벤트 위치를 어디다 해야하나요?
따로
$(function(){
});
이런거 만들어서 안에 추가 하는건가요?
자바스크립트는 할때마다 헷갈림 ㅠㅠ 가르침을 주실분~~
답변 1
const testBtn = document.querySelector("#testBtn");
testBtn.addEventListener("click", ()=>{
let tmpBtn = document.createElement("button");
tmpBtn.id = "addBtn";
let btnTxt = document.createTextNode("추가버튼");
tmpBtn.appendChild(btnTxt);
tmpBtn.onclick = function() { doSomething(); };
document.querySelector("#test_wrap").appendChild(tmpBtn);
});
const doSomething = () => {
console.log('추가버튼 클릭');
}
안그래도 함수 하나 만들어서 테스트 하고있었는데 이게 맞는건가보네요
tmpBtn.onclick = function() { doSomething(); };
이렇게는 안했지만....
답변 주신 내용중에서요...
tmpBtn.onclick = function() { doSomething(); };
이거 대신
doSomething(); 요거만 appendChild 밑에 넣어놓고 doSomething(); 이안에서
document.querySelector() 로 만들어진 애들 다시 불러와서 사용해도 상관없겠죠?
답변을 작성하시기 전에 로그인 해주세요.
