다른 StackOverflow 질문 (Creating a clickable grid in a web browser)에서 답변자는이를 http://jsfiddle.net/6qkdP/2/으로 게시했습니다.지원 기능 콜백 이해
JavaScript를 배우는 동안 비슷한 것을 시도했지만이 답변은 답변보다 많은 질문을 제공했습니다. 이제는 함수를 반환하는 함수의 개념을 이해하고 있다고 생각합니다. 그러나, JS가 jsfiddle 링크를 게시 라인 15 일 ...
날 혼란, 그리고 그 이유는, 함수가 생성됩니다
function clickableGrid(rows, cols, callback){...}
그것은 간단 보인다 행과 열의 수를 전달 , 어떤 함수가 호출되는지를 전달합니다 (맞습니까?). 위의 두 번째 줄에서는 함수를 호출하고 콜백의 경우에는 몇 가지 (el, row, col, i)를 받아들이고 콘솔에서 출력을 제공하는 함수를 전달합니다.
var grid = clickableGrid(10,10,function(el,row,col,i){...}
모두 이해하기 쉬운 것처럼 보입니다 (물론, 올바르게 이해한다고 가정하면!). 그러나 다음 줄 24에서 시작하는이 비트는 나를 혼란스럽게합니다 :
생성되는 요소에 대한 클릭 이벤트 리스너를 생성합니다. 이 이벤트 리스너는 (...
, 다른 함수를 반환 (기능 (엘, R, C, I) {을 ... '클릭'4 개 매개 변수 ... cell.addEventListener을 받아 새로운 함수를 호출
return function(){
..., ...
callback(el,r,c,i);
}
... 다음이 비트는 클릭시 전달되는 것입니다 이벤트?
})(cell,r,c,i),false);
맞습니까? 그것은 나에게 지나치게 혼란스럽게 보입니다 ... 예를 들어, 같은 매개 변수를 받아들이는 함수 하나가 왜 만들어 졌는지, 그리고 이러한 콜백을 모두 사용하지 않고도 바로 요소의 스타일을 변경한다는 것을 이해하지 못합니다. 나는 무언가를 놓치고 있으며, 여기서 더 경험 많은 사람들이 내가 이해하지 못하는 것이 무엇인지에 대한 정보를 제공하기를 희망합니다.
감사합니다. JSFiddle가 다운 된 경우
코드 :
var lastClicked;
var grid = clickableGrid(10,10,function(el,row,col,i){
console.log("You clicked on element:",el);
console.log("You clicked on row:",row);
console.log("You clicked on col:",col);
console.log("You clicked on item #:",i);
el.className='clicked';
if (lastClicked) lastClicked.className='';
lastClicked = el;
});
document.body.appendChild(grid);
function clickableGrid(rows, cols, callback){
var i=0;
var grid = document.createElement('table');
grid.className = 'grid';
for (var r=0;r<rows;++r){
var tr = grid.appendChild(document.createElement('tr'));
for (var c=0;c<cols;++c){
var cell = tr.appendChild(document.createElement('td'));
cell.innerHTML = ++i;
cell.addEventListener('click',(function(el,r,c,i){
return function(){
callback(el,r,c,i);
}
})(cell,r,c,i),false);
}
}
return grid;
}