const p = {


}

const ele = {

    tabjs: document.querySelector('.tab1'),
    tabjq: $('.tab1')

}

const f = {

    run: () => {

        console.log('iniciando programa');

        ele.tabjs.addEventListener('click', f.DetectaEvento);

        ele.tabjq.click(f.DetectaEventoJQ);

        f.funcionesTabla();

    },

    funcionesTabla: () => {
        // tabla completa
        console.log('=====objeto javascript ===============================');

        console.log('table: ', ele.tabjs);
        console.log('   |_rows.length: ', ele.tabjs.rows.length);
        ele.tabjs.rows[3].style.background = '#f8d7da';
        console.log('   |_rows[3].style.background = "#f8d7da"');

        console.log('=====objeto jquery ===============================');

        console.log('table: ', ele.tabjq);
        console.log('table[0]: ', ele.tabjq[0]);
        console.log('   |_rows.length: ', ele.tabjq[0].rows.length);
        ele.tabjq[0].rows[1].style.background = 'Yellow';
        console.log('   |_rows[3].style.background = "Amarillo"');

    },

    DetectaEvento: (e) => {

        console.log('=== JAVASCRIPT ================================================');
        
        console.log('click: ', e);
        console.log('   |_path: ', e.path);
        console.log('   |_srcElement: ', e.srcElement);
        console.log('   |_type: ', e.type);
        console.log('   |_timeStamp: ', e.timeStamp);
        console.log('   |_view: ', e.view);
        console.log('   |_target: ', e.target);
        console.log('       |_cellIndex: ', e.target.cellIndex);
        console.log('       |_childNodes: ', e.target.childNodes);
        console.log('       |_children: ', e.target.children);
        console.log('       |_outerHTML: ', e.target.outerHTML);
        console.log('       |_innerHTML: ', e.target.innerHTML);
        console.log('       |_parentNode: ', e.target.parentNode);
        console.log('           |_rowIndex: ', e.target.parentNode.rowIndex);
        console.log('           |_Cells[0].innerHTML: ', e.target.parentNode.cells[0].innerHTML);

    },

    DetectaEventoJQ: (e) => {
        
        console.log('=== JQUERY ===============================================');

        console.log('click: ', e);
        console.log('   |_currentTarget: ', e.currentTarget);
        console.log('   |_delegateTarget: ', e.delegateTarget);
        console.log('   |_handleObj: ', e.handleObj);
        console.log('       |_handler: ', e.handleObj.handler);
        console.log('       |_handler.name: ', e.handleObj.handler.name);
        console.log('   |_target: ', e.target);
        console.log('       |_cellIndex: ', e.target.cellIndex);
        console.log('       |_childNodes: ', e.target.childNodes);
        console.log('       |_children: ', e.target.children);
        console.log('       |_outerHTML: ', e.target.outerHTML);
        console.log('       |_innerHTML: ', e.target.innerHTML);
        console.log('       |_parentNode: ', e.target.parentNode);
        console.log('           |_rowIndex: ', e.target.parentNode.rowIndex);
        console.log('           |_Cells[0].innerHTML: ', e.target.parentNode.cells[0].innerHTML);
        
    }

}

f.run();