var inputWrap = document.querySelector('#inputWrap');
var addBtn = document.querySelectorAll('.addBtn');
var delBtn = document.querySelectorAll('.delBtn');
for(var i=0; i<addBtn.length; i++){
addBtn[i].onclick = function() {
//#inputWrap 첫번째 하위요소 선택
var firstLi = inputWrap.firstElementChild;
console.log(firstLi);
//첫번째 하위요소를 복제
var clone = firstLi.cloneNode(true);
//복제된 대상의 하위 input 태그 검색
var cloneInput = clone.querySelector('input');
//value값을 공백으로 삽입
cloneInput.value = '';
inputWrap.appendChild(clone);
/*
읽어진 대상에만 이벤트가 등록이 되어 있으며,
추가된 대상에는 이벤트를 별도로 등록해야 한다.
이러한 행위를 '동적 바인딩'이라고 한다.
*/
}
}
> 첫번째 행엔 이벤트가 등록되어 있어서 추가가 잘 되는데, cloneNode로 삽입된 추가행들엔 이벤트가 걸려있지 않아 버튼을 눌러도 이벤트가 실행되지 않는다. 이럴 때 동적바인딩을 이용하면 된다.
바인딩
- 바인딩 : 이벤트 등록 - 동적 바인딩 : 동적으로 추가된 객체에 이벤트 등록
<ul id="bind01">
<li>
<button type="button" class="addBtn01">추가</button>
<button type="button" class="delBtn01">제거</button>
</li>
</ul>
<script type="text/javascript">
var bind01 = document.querySelector('#bind01');
bind01.onclick = function(e) {
//콜백데이타로 이벤트 작동 정보가 매개변수로 넘어온다.
//target 속성은 이벤트 작동의 행위 대상이다.
var targetClass = e.target.classList;
console.log(e, targetClass.contains('addBtn01'));
//addBtn01클래스 버튼 클릭을 했다면
if(targetClass.contains('addBtn01')){
var clone = e.target.parentElement.cloneNode(true);
this.appendChild(clone);
}
//delBtn01클래스 버튼 클릭을 했다면
if(targetClass.contains('delBtn01')){
e.target.parentElement.remove();
}
}
</script>
> 복제되어 새로 삽입된 행들의 버튼들도 제대로 이벤트가 구동된다
addEventListener
- addEventListener 메서드를 활용하여 이벤트 등록이 가능하다. - html 요소 이벤트(on속성이벤트)는 동일한 이벤트 한번만 등록 가능한 반면,addEventListener로 이벤트 등록시 동일한 이벤트 1개 이상 등록 가능하다. - addEventListener 이벤트 등록시 여러 이벤트를 한번에 등록이 가능하다.
<button type="button" id="aelBtn01">이벤트 중첩</button>
<input type="text" id="aelInput01">
<script type="text/javascript">
var aelBtn01 = document.querySelector('#aelBtn01');
//첫번째 인수: 이벤트명 , 두번째 인수: 함수
aelBtn01.addEventListener('click', function(e) {
console.log('클릭1',e)
});
aelBtn01.addEventListener('click', function(e) {
console.log('클릭2',e)
});
var aelInput01 = document.querySelector('#aelInput01');
aelInput01.addEventListener('blur', function(e){
console.log(this.value);
})
</script>
var inputGroup = document.querySelector('#inputGroup');
inputGroup.addEventListener('click', function(e) {
//console.log(e.target.classList);
var targetClass = e.target.classList;
if(targetClass.contains('addBtn')){
//console.log(this.querySelector('li'));
var cloneLi = e.target.parentElement.cloneNode(true);
var cloneLiText = cloneLi.querySelectorAll('input[type=text]');
for(var i=0; i<cloneLiText.length; i++){
cloneLiText[i].value = '';
}
var cloneLiRadio = cloneLi.querySelectorAll('input[type=radio]');
for(var j=0; j<cloneLiRadio.length; j++){
cloneLiRadio[j].checked = false;
}
this.appendChild(cloneLi);
}
if(targetClass.contains('delBtn')){
//console.log(e.target);
if(inputGroup.querySelectorAll('li').length >1){
e.target.parentElement.remove();
}else {
alert('삭제할 수 없습니다');
}
}
})
> 라디오 타입이 하나밖에 체크가 안되는데 clone으로 name이 모두 userGender로 가져와져서 초기화는 되는데 하나밖에 체크가 안된다
방법은 두가지 있는데
1. radio의 name 속성에 그냥 숫자변수를 지정해서 증감연산자를 사용하면
삭제를해도 숫자는 올라가기 때문에 name이 겹치지는 않는다
코드는 쉽지만 나중에 서버에서 받아 올 때 쉽지않음....
2. 추가/삭제 할 때마다 radio의 count를 다시 세는 코드를 따로 짜주는 방법이 있는데
나중에 서버에서 받아올 때 편하고 정말 서버에서 받을려고 radio뿐만 아니라 다른 input태그들의 name속성들도 바꿔주는게 좋다(이름이 같아서 배열로 받아오기 때문에)
function radioCount(){
var liList = inputGroup.children;
for(var i=0; i<liList.length; i++){
var radio = liList[i].querySelectorAll('[type=radio]');
for(var j=0; j<radio.length; j++){
radio[j].name = 'userGender_' + i;
}
}
}
// 추가/삭제되는 코드 아래에 함수를 호출해주면 된다
만든 폼 직접 서버에서 값 받아보기
ul을 form태그로 감싸고 action속성에 userInfo.jsp를 준다.
유효성 검사
/*********************************
2022-01-14 진수경
회원 추가 및 삭제 유효성 검사
**********************************/
var saveProcessBtn = document.querySelector('#saveProcessBtn');
var userForm = document.querySelector('#userForm'); //실제 작업할 땐 변수선언은 위쪽에 몰아서 써주는게 좋음
saveProcessBtn.addEventListener('click', function() {
var liList = inputGroup.children;
for(var i=0; i<liList.length; i++){
//var inputs = liList[i].querySelectorAll('input'); -> 이렇게 찾으면 name속성으로 찾아야돼서 gender값 찾기가 번거로워짐
var userName = liList[i].querySelector('[name=userName]');
var userAddr = liList[i].querySelector('[name=userAddr]');
var userGender = liList[i].querySelectorAll('[name=userGender_'+i+']');
if(userName.value.trim()==''){
alert('회원명을 입력해주세요.');
userName.focus();
return; //반복문 중단, 함수 빠져나가기
}
if(userAddr.value.trim()==''){
alert('회원주소를 입력해주세요.');
userAddr.focus();
return;
}
var cnt = 0;
for(var j=0; j<userGender.length; j++){
if(userGender[j].checked) cnt++;
}
if(cnt==0){
alert('회원 성별을 입력해주세요.');
userGender[0].focus();
return;
}
}
userForm.submit();
})
