e.target과 parentNode

e.target and parentNode

e.target은 클릭이벤트가 일어난 태그를 알려준다.

e.target.parentNode는 클릭된 것의 부모 태그를 말한다.

e.target.parentNode는 클린된 것의 조상(할머니) 부모 태그를 말한다.

반대로, e.target.children 은 자식 태그를 말한다.

var 바디 = document.body;
var 테이블 = document.createElement('table');//테이블 원소 생성
var 줄들 = [];
var 칸들 = [];
var 턴 = 'X';

var 비동기콜백 = function(이벤트) {
    //칸을 클릭했을 떄 몇 칸인지를 아는 것이 핵심이다.
    //이벤트.target 은 클릭이벤트가 일어난 태그를 알려준다.
    //이벤트.target.parentNode 는 클릭된 애의 부모 태그를 말한다!
    //이벤트.target.childeren 은 자식 노드로 간다.
    console.log(이벤트.target);//td(칸)
    console.log(이벤트.target.parentNode);//현재 태그(td 칸)에서 부모 태그(tr 줄)로 갈 수 있다.
    console.log(이벤트.target.parentNode.parentNode);//현재 태그(td 칸)에서 할머니 태그(테이블)로 갈 수 있다.

    var 몇줄 = 줄들.indexOf(이벤트.target.parentNode);//0,1,2 중 몇번째 줄인지.
    console.log('몇줄',몇줄);
    var 몇칸 = 칸들[몇줄].indexOf(이벤트.target);
    console.log('몇칸',몇칸);

    //input의 값은 value, 태그 안 글자는 textContent. 혼동주의!
    if(칸들[몇줄][몇칸].textContent !== '') {//칸이 이미 채워져있는가?
        console.log('빈칸아닙니다.');
        
    } else {
        console.log('빈칸입니다.');
        칸들[몇줄][몇칸].textContent = 턴;
        //상대에게 차례를 넘겨준다.
        if(턴 === 'X') {
            턴 = 'O';
        } else {
            턴 = 'X';
        }
    }
};
for(var i = 1; i <= 3 ; i++) {
    var 줄 = document.createElement('tr');//i는 1부터 3까지 html 줄 생성
    줄들.push(줄);//생성한 줄을 '줄들'배열에 추가.
    칸들.push([]);//배열단위로 데이터를 푸시한다.
    for(var j = 1; j <= 3; j++) {
        var 칸 = document.createElement('td');
        칸들[i-1].push(칸);//한 줄당 3칸씩 추가.
        //칸을 눌렀을 때 동작 구현
        칸.addEventListener('click',비동기콜백);
        줄.appendChild(칸);
    }
    테이블.appendChild(줄);
}
바디.appendChild(테이블);
console.group('줄들',줄들,'칸들',칸들);