[jQuery] click 이벤트 콜백 함수에 패러미터 설정하기

[jQuery] .click event pass parameters

• 상황: 제이쿼리 사용해서 click 이벤트 설정 시 패러미터를 설정하고 싶었다.
  • 잘못된 코드 1

  // Wrong code ex1
  var someword = 'blahblah'; 
  function test(param) { alert(param); }
  
  $('#somebtn').click(test(someword)); 
  

  이렇게 하면 클릭 뒤에 콜백이 실행되는게 아니라 윈도우가 로딩되면 바로 함수 내용이 실행되버린다.
  • 잘못된 코드 2

  // Wrong code ex2
  var someword = 'blahblah'; 
  function test(param) { alert(param); }
  
  $('#somebtn').click({param: someword}, test); 
  
  

  패러미터에 들어갈 것은 이거다! 라고 오브젝트를 통해 알려준다. 그렇지만 이렇게 하면 내가 원하는 문자열을 출력하는 것이 아니라 [object Object]를 alert한다. 이벤트 객체 자체를 리턴해버린다.
  • 맞는 코드

  // Right answer
  var someword = 'blahblah'; 
  function test(e, param) { alert(e.data.param); }
  
  $('#somebtn').click({param: someword}, test); 
  
  

  위에서 잘못된 코드 2 에서 리턴된 객체를 콘솔에 찍어 보면 프로퍼티 중 data가 있는데 객체 형태로 param와 그 값을 리턴한다. ({param: 'blahblah'} 이런 식으로) 그래서 코드를 위처럼 변경해주면 내가 전달하고자 하는 패러미터를 받아서 함수를 실행할 수 있다.
• 사소하지만 자주 제이쿼리 이벤트 많이 쓸거 같아 저장 -
•  
•  

+) d3 추가

• d3.js click 이벤트에서 패러미터 전달하기
  • 콜백 함수 내에 또 함수를 호출하되 2번째 패러미터로 전달

  d3.csv("exercise.csv", function(error, data){
  	d3.select('#scoreDisplayBtn').on("click", function() { displayScore(this, data); })
  })