날짜 : 2017. 6. 27(화)
목표 : 익명 함수에 인자값을 전달해야 하는 이슈.
- eventlistener 사용시 익명함수를 만들거나 호출을 한다.
- 이때 함수를 호출할때 인자값을 전달을 해야 한다. (여기에서는 event 변수)
- 버튼을 누르거나 'enter'를 입력하는 경우 함수 실행
function addList (){
if(evt.target.tagName === "BUTTON" || evt.keyCode === 13){
var temp = input.value;
var tempHTML = '<li class="fl-left">' + temp + '</li><button class="fl-right">변경</button><button class="fl-right">완료</button><button class="fl-right">삭제</button><br>'
order.lastElementChild.insertAdjacentHTML('afterend',tempHTML);
input.value = "";
}
}
add.addEventListener("click", addList);
input.addEventListener("keydown", addList);
수행결과 : 예약어의 경우 사용방법을 다시 배워야 하며, 문제를 쉽게 생각하는 것이 필요하다.
- evt는 예약어 이여서 인자값 전달 없이 사용이 가능.
function addList (){
if(evt.target.tagName === "BUTTON" || evt.keyCode === 13){
var temp = input.value;
var tempHTML = '<li class="fl-left">' + temp + '</li><button class="fl-right">변경</button><button class="fl-right">완료</button><button class="fl-right">삭제</button><br>'
order.lastElementChild.insertAdjacentHTML('afterend',tempHTML);
input.value = "";
}
}
add.addEventListener("click", addList);
input.addEventListener("keydown", addList);
- bind를 사용 안하는 경우 함수 안에서 함수를 호출 한다.
add.addEventListener("click", function(){
addList(arg1, arg2 ...)
});