[VanillaJS] 검색폼 구현 3

빨간 색을 칠 한 부분이 추가된 코드이다.

onKeyup함수에 추가된 것부터 확인해부다

enter는 코드 번호로 13번이다 그래서 변수로 지정해주었다.

그리고

if(e.keyCode !== enter) 키 코드가 엔터가 아닌 경우에는 return값을 주어 그냥 지나치고

그렇지 않는 경우에는

FormView의 emit메소드를 이용 하여 메인 컨트롤러에 값을 알려주는 역할을 한다.

파라미터값은 

우리가 새로 만들어줄 

이벤트 @submit (여기서 @는 커스텀임을 표현하기 위해 사용하였다)

데이터 {input : this.inputEl.value}이다.

애초에 FormView에서는 결과를 나타내는 역할을 하는게 아니기 때문에

Form에서 일어난 이벤트를 

MainController에 알려주기만 하면 된다.

init()함수에

FormView에 on메소드를 추가했고

이벤트는 submit

핸들러는

e를 파라미터로 가지는 onSubmit을 실행 하는 함수이다

이다.

onSubmit함수는

input을 파라미터로 가지고

콘솔을 출력한다.

콘솔 값은

[MainController] 'onSubmit() Form의 value값이다.

input이 어쩌다가 Form의 value까지 넘어오게 됬는지 돌아가보자

input은 e.detail.input

여기서 e는 CustomEvent인 @submit이다.

그리고 그 속성값에는 detail 그리고 그 하위에 input이 있다.

왜?

emit으로 이벤트를 방출 했기 때문이다.

this.emit('@submit', {input : this.inputEl.value})

그 결과 emit은 이벤트와 데이터를 파라미터로 받아

폼 태그의 새로운 이벤트를 생성하게 된다.

그리고 이 이벤트는

if(e.keyCode !== enter) return

this.emit('@submit', {input : this.inputEl.value})

만약 enter가 keyCode라면 실행이 발생하고

그 값은 input엘리먼트의 벨류값이 된다.

결국 

init(){

console.log(tag, 'init()')

FormView.setup(document.querySelector('form'))

.on('@submit', e => {this.onSubmit(e.detail.input);console.log(e);})

여기서 

FormView.on으로 이벤트리스너를 생성하고 그 이벤트는 키보드를 입력하면서 생기고

submit이벤트 발생시에 e(submit)의 detail.data값인 

this.inputEl.value값이 리턴된다.