Mission6 문제해결정리(addEventListener, submit)

📌 addEventListener의 콜백함수

✱문제 발생

// class TodoView 안에 있는 메서드
initEvent(todoViewObj) {
        // 콜백함수가 기명함수일 때
        this.addButton.addEventListener("click", this.addList.bind(this));

        // 콜백함수가 익명함수일 때
        this.listWrapper.addEventListener("click", function({target}) {
            if(target.nodeName === 'LABEL') { todoViewObj.makeLineThrough(target); }
            if(target.nodeName === 'I') { todoViewObj.removeListItem(target); }
        });
    }

addList(event) {
        event.preventDefault();
        ...
    }

addEventListener안에 this.addList 함수의 this를 바인딩해주기 위해 bind(this)를 썼다.

addList함수의 매개변수가 event객체이기 때문에 this.addList.bind(this)에 event객체를 인자로 넘겨줘야 한다고 생각했다.

// bind() 사용
const boundAddList = this.addList.bind(this);
this.addButton.addEventListener("click", boundAddList(event));
// call() 사용
this.addButton.addEventListener("click", this.addList.call(this, event));

그래서 이렇게 event객체를 넘겨줬는데, event가 defined되지 않았다는 에러가 떴다.

✱해결

addEventListener에 들어가는 콜백함수가 익명함수, 기명함수일 때 다르다!

익명함수일 때는 함수를 바로 그 자리에 적기 때문에 당연히 event객체를 매개변수에 쓴다. 하지만 기명함수일 때는 event객체를 넘겨주지 않는다. 넘기면 event라는 변수가 정의되지 않았기 때문에 에러가 뜬다. 이벤트리스너가 실행될 때 이벤트객체가 해당 함수로 전달이 되기 때문에 함수를 선언하는 곳에서 event를 매개변수로 받고 본체에서 event객체를 사용하면 된다..

그러니까 addEventListener안에서는 event객체를 넘겨줄 필요 없고,

이벤트 콜백함수에서 매개변수에만 쓰면 된다!

📌 <input type="text">에서 enter 눌러서 이벤트 핸들러 동작.

✱문제 발생

<input type="button" name="add" value="Add" id="addButton">

add 버튼을 HTML에서 이렇게 작성했다. js파일에서 클릭 이벤트 핸들러로 작성했기 때문에 엔터키를 눌렀을 때도 같은 핸들러가 발생하도록 하고 싶었다.

✱해결

<input type="submit" name="add" value="Add" id="addButton">

type="button"에서 type="submit"으로 바꿔주고, add버튼 클릭과 연결된 이벤트 핸들러에서 event.preventDefault()를 통해 기본 이벤트를 제거해 페이지가 reload되지 않도록 했다.