inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

모던 자바스크립트(ES6+) 기본

4. let 변수와 var 변수 차이

선생님께서 ES5 심화과정에서 알려주신 event 처리 방법 나이스입니다!

해결된 질문

214

twosom

작성한 질문수 69

1

일전에 ES5 심화과정 에서 event 처리시에 this 를 참조하지 못해서 bind 를 이용해서 해결하신다고 알려주셨는데, 제 나름대로 활용을 해봤습니다.

아직은 많이 미숙하지만 이게 정말 되는게 너무 신기하네요.

덕분에 많이 배우며 성장하고 있습니다. 항상 좋은강의 감사드립니다!

var obj = {
yellowPoint: 100,
redPoint: 200,
bluePoint: 300,
setEvent: function () {
var node = document.querySelector('.sports');
for (let k = 0; k < node.children.length; k++) {
node.children[k].onclick = this.myEvent.bind(obj, k);
}
},

myEvent: function (k, event) {
switch (k) {
case 0:
event.target.style.background = 'yellow';
console.log('k : ', k);
console.log('yellowPoint : ', this.yellowPoint);
break;
case 1:
event.target.style.background = 'red';
console.log('k : ', k);
console.log('redPoint : ', this.redPoint);
break;
case 2:
event.target.style.background = 'blue';
console.log('k : ', k);
console.log('bluePoint : ', this.bluePoint);
break;
}
}
};

obj.setEvent();

javascript es6

답변 1

1

김영보

좋습니다.^^ 아래처럼 할 수도 있습니다. ES6 문법 포함

var obj = {
  setEvent() {
    const nodes = document.querySelectorAll('.sports');
    Array.from(nodes, (node, index) => {
      node.onclick = this.myEvent.bind(this, index, node);
    }, obj);
  },
  myEvent: function (index, node, event) {
    console.log(index);
  }
};
obj.setEvent();

0

twosom

감사합니다! 많은 도움 되었습니다~!

하루빨리 Tensorflow.js 파트까지 마스터하고싶네요! 더욱 열심히 하겠습니다~

0

김영보

응원합니다^^

prototype의 메소드 내부에 화살표 함수가 작성된 경우

1

229

0

let 변수 호이스팅

0

381

1

[정리시간]부족하지만...

3

238

0

[제네레이터함수, yield를 활용한 무한 덧셈] 식, result += yield result를 어떻게 이해 해야할까요???

0

408

1

자바스크립트도 컴파일을 하나요?

0

626

1

틀린부분 질문드립니다

0

304

1

clear() 메소드 관련 질문

0

250

0

실행 시점

0

162

0

yield에 대해 질문이 있습니다.

0

302

2

window 오브젝트에서의 함수표현식 호출

0

279

1

Unicode 관련 정리

2

226

1

화살표 함수의 this 의 정적 스코프 참조 부분 질문드립니다.

0

205

1

안녕하세요.선생님 질문이 생겨서 글남깁니다.

0

201

1

안녕하세요.선생님 질문 있습니다.

1

262

2

Array.from()이랑 Array.of()랑 설명이 뒤바뀐 것 같아요..

0

177

1

Arrow Function 에서 Scope 관련 질문이 있습니다.

1

298

5

setPrototypeOf() 는 정의에 대해 헷갈린 점 질문 드립니다.

5

234

1

[강의자입니다] 브라우저 디버거 창의 오른쪽에 let, const 변수 표시

5

289

0

디버깅 맨 처음부터 Script에 globalLet이 설정되어있습니다.

1

243

1

강의 pdf 파일 공개 부탁드립니다

0

170

1

아 전역에 let을 선언해도 순서대로 읽는군요;;

2

240

1

Symbol.species 질문입니다.

0

420

1

글의 정리가 안되어있어 삭제했습니다.

0

162

1

DevTools > Sources 에서 Block을 볼 수 없어요!

0

277

4