event.target을 사용한 onclick 이벤트 (비동기 호출 응용)

이름을 클릭했을 때, 클릭한 이름으로 필터링시키는 함수 구현하기

 

며칠 전에 본 코딩이고, 질문을 올렸는데, 올린 당일에도 이해가 안돼 미뤘던 질문을 며칠이 지난 오늘 다시 보니 더 이해가 안된다. 코딩은 꼭 악기같다. 어떤 스킬을 내가 연마하는데, 이게 완전이  "내 것"이 되지 않으면, 금방 원상태로 돌아가게돼서 또 다시 연마를 해야한다. 결국 "내 것"이 될 때까지 연습을 멈추지 않는게 가장 빨리 습득하는 법일 것 같다. 누구보다 게으른 내가 과연 코딩을 하는게 맞는지... 코딩이 피아노처럼 즐거워질 수 있길 바란다. 어느정도 실력을 갖춰야 비로소 즐길 수 있는건 분명하다. 그게 무엇이 되었든.

 

1. onclick  이벤트

2. event.target을 이용, 클릭한 대상의 element에 접근, 그 대상은 textContent이므로 event.target.textContent를 하면 되겠다.

 

다시 처음부터 시작해야할듯...... 어디부터 다시 잘못된 것인가.

 

------------------------------------------

비동기 호출(asynchronous call)의 예로 이벤트에 따른 함수(event handler)가 있다.

document.querySelector('#btn').addEventListener('click', function(e) {
//문서에서 btn이란 id를 가진 버튼을 찾아서, 클릭이벤트를 주어, 어떤 함수를
  console.log('button clicked');
  //'button clicked'라는 콘솔로그를 찍는 함수를 실행시키겠다는 메시지를 담고 있음
});

function handleClick() {
  console.log('button clicked');
};

document.querySelector('#btn').onclick = handleClick; //함수명이 레퍼런스로 주어져  함수 자체가 연결됨

document.querySelector('#btn').onclick = function() { //새로운 익명함수를 만들어
  handleClick(); //그 안에서 핸들 클릭을 실행한다
}

document.querySelector('#btn').onclick = handleClick.bind(); //함수메소드

******불가능*******
document.querySelector('#btn').onclick = handleClick();//함수 "실행"이 아닌 함수 자체를 연결해야한다
*****************

여기서 눈여겨볼 .bind()가 있다.

.bind는 함수 메소드 중 하나인데, 함수 실행이 아닌, 함수 자체를 리턴해준다.