20211111 동적이벤트 바인딩

이벤트 동적 바인딩 실습

(동적 객체 생성 아후 생성된 객체에 이벤트 바인딩하기)
실습. 아래의 버튼을 클릭시 동적으로 행을 추가 혹은 삭제하는 이벤트를 등록하고, 추가한 대상에 동일한 기능이 적용되도록 작업하여라.
추가된 대상에 데이타들은 초기화되어야한다. 

 

<ul id="event-group">
		<li>
			<input type="text" name="userName" placeholder="사용자명">
			<input type="text" name="userAge" placeholder="사용자나이">
			<button type="button" class="addUser">사용자추가</button>
			<button type="button" class="delUser">사용자삭제</button>
		</li>
	</ul>

풀이)

<script type="text/javascript">
	var eventgroup = document.querySelector('#event-group')
	var addUser = document.querySelectorAll('.addUser'); //배열로 반환
	var delUser = document.querySelectorAll('.delUser');
	
	
	var addGroup = function(){
		console.log('.addUser')
		var liClone = this.parentElement.cloneNode(true);
		eventgroup.appendChild(liClone);
		
		var addBtn = liClone.querySelector('.addUser');
		var delBtn = liClone.querySelector('.delUser');
		var userName = liClone.querySelector('input[name=userName]');
		var userAge = liClone.querySelector('input[name=userAge]');
		
		userName.value= '';
		userAge.value= '';
		
		addBtn.addEventListener('click', addGroup);
		delBtn.addEventListener('click', delGroup);
	}
	
	function delGroup(){
		console.log('.delUser')
		this.parentElement.remove();
	}
	
	for(var i=0; i<addUser.length;i++){
		addUser[i].addEventListener('click', addGroup);
		delUser[i].addEventListener('click', delGroup);
		
	}
	
	/* document.addEventListener('click', function(){
		console.log('document');
	}) */
	
	</script>

 

1. 각 요소들을 querySelctor 로 받아온다.

	var eventgroup = document.querySelector('#event-group')
	var addUser = document.querySelectorAll('.addUser'); //배열로 반환
	var delUser = document.querySelectorAll('.delUser');

 

 

2. 배열을 풀어 각 이벤트요소 클릭할 때마다 함수가 실행된다.

	for(var i=0; i<addUser.length;i++){
		addUser[i].addEventListener('click', addGroup);
		delUser[i].addEventListener('click', delGroup);	
 	}

 

3. delUser[i] 를 클릭하면 delGroup 함수가 실행되어 나 자신의 부모요소(li ~ li) 를 삭제한다.

function delGroup(){
		console.log('.delUser')
		this.parentElement.remove();
	}

 

<-- this.parentElement

 

 

 

 

4. 

var addGroup = function(){
		console.log('.addUser')
		var liClone = this.parentElement.cloneNode(true);
		eventgroup.appendChild(liClone);
		
		var addBtn = liClone.querySelector('.addUser');
		var delBtn = liClone.querySelector('.delUser');
		var userName = liClone.querySelector('input[name=userName]');
		var userAge = liClone.querySelector('input[name=userAge]');
		
		userName.value= '';
		userAge.value= '';
		
		addBtn.addEventListener('click', addGroup);
		delBtn.addEventListener('click', delGroup);
	}

나 자신의 부모요소 (li~li)를 복제하여 liClone에 담는다.

eventgroup에 liClone 객체를 추가한다.

 

4-1. 추가되어 li~li가 생성됐을 때,

복제된 liClone의 addUser, delUser를 변수에 담는다.

 

input 박스의 userName 과 userAge를 변수에 담는다.

복제됐을 때 userName 과 userAge의 value 값은 공백이다.

 

복제된 addBtn을 클릭하면 다시 addGroup을 실행하여 복제된 요소까지 동일한 함수를 실행한다.

 

 

---

동적으로 생성된 객체에 이벤트 바인딩 하기

- 하위 요소가 많고 이름이 중첩되어 있는 경우에는 사용하기에 적합하지 않다.

<ul id="event-group">
		<li>
			<input type="text" name="userName" placeholder="사용자명">
			<input type="text" name="userAge" placeholder="사용자나이">
			<button type="button" class="addUser">사용자추가</button>
			<button type="button" class="delUser">사용자삭제</button>
		</li>
	</ul>

풀이)

	<script type="text/javascript">
	var eventGroup = document.querySelector('#event-group');
	
	 document.addEventListener('click', function(e){
		/* console.log('document', e, e.target); */
		/* console.log([e.target], e.target.className); */
		
		/* console.log(eventGroup.lastElementChild); */
        
		if(e.target.className.indexOf('addUser') > -1){
			var lastLi = eventGroup.lastElementChild.cloneNode(true);
			eventGroup.appendChild(lastLi);
		}
		
		if(e.target.className.indexOf('delUser') > -1){
			e.target.parentElement.remove();
		}
		
	}) 
	
	</script>

 

 

1. 화면에서 마우스 포인터가 클릭된 대상의 이벤트 요소를 가져온다.

 document.addEventListener('click', function(e){
 console.log('document', e, e.target); }

1-1. 빈 화면 클릭시 : 

1-2. 사용자명 input 박스 클릭시 : 

 

2.

if 문을 사용하여 해당 원하는 구간을 지정해준다.

선택한 target의 className 중 addUser를 찾고 

검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴한다.

찾는 문자열이 없는 경우 -1 를 리턴하므로 -1 보다 크다면 찾는 문자열이 있다.

 

eventgroup의 마지막 자식요소를 복사하여 객체를 복사한다.

if(e.target.className.indexOf('addUser') > -1){
			var lastLi = eventGroup.lastElementChild.cloneNode(true);
			eventGroup.appendChild(lastLi);
		}

 

< --- eventGroup.lastElementChild

 

 

 

 

 

3. 

if(e.target.className.indexOf('delUser') > -1){
			e.target.parentElement.remove();
		}

<--- e.target.parentElement