완성 코드
<html>
<body>
<div class="root">
</div>
<button class="btn">버튼생성</btton>
<script>
let num = 0;
let root = document.querySelector('.root');
let btn = document.querySelector('.btn');
//동적 생성되는 버튼 이벤트
root.addEventListener('click', function(e) {
let thisNode = e.target.className;
console.log(thisNode);
//... if문을 이용하여 다양한 이벤트 추가
});
//동적으로 생성되어 바인딩 되는 이벤트
btn.addEventListener('click', function(e) {
let div = document.createElement('div');
div.className = 'row';
num++;
div.innerHTML = '<button class="child'+num+'">Target</button>';
document.querySelector('.root').appendChild(div);
});
</script>
</body>
</html>동적 이벤트 바인딩?
실제 존재하는 부모 급 노드 <div class='root'> 를
전역으로 click 이벤트를 걸어서
동적으로 생성되는 자식 급 노드 <button class='child'>를 생성하여 클릭할 때
클릭 이벤트의 타겟 으로 동적 생성된 노드로 접근하여
let thisNode = e.target.className;
마치 내가 동적으로 생성된 버튼을 직접 클릭한 듯한 효과를 낼 수 있다.
제이쿼리로 하면 더욱 쉽게 구현가능.
//동적 이벤트를 바인딩하기 위해서 on메서드 사용
//부모 div인 root를 클릭할때 타겟을 button 으로 잡고 이벤트를 준다.
//this는
$('.root').on('click', 'button', function(e){
alert(this); //[object HTMLButtonElement]
console.log(this.className); // > child2
});
Hej_han