No funcionan conjuntamente addEventListener y removeEventListener

[Oahu]

Hola estoy muuuuuy desesperado llevo 2 dias con esto!! el tema es que esto haciento un tablero de dibujo formada por una tabla con x celdas y un div que contiene 6 colores, cuando pinchas sobre uno , tienes que pinchar (evento onclick) en una de las celdas de la tabla y se pinta del color seleccionado una vez activada la celda se activa el event mouseover y pintas con ese color seleccionado sobre cualquier celda, en el momento que vuelves hacer clic en una celda el color se deselecciona y ya no funciona el mouse over, total que hasta el mousover todo prefecto, pero encuanto quiero desactivar el color y cargar el removeevent no hace nada no entiendo por que??? de antemano muchisimas gracias!!

Código HTML:

//Elimina los nodo de texto vacios
function limpiarNodos(nodoPadre)
{
    for (var i = 0; i < nodoPadre.childNodes.length; i++) {
        var node = nodoPadre.childNodes[i];
        // \S cualquier caracter individual que no se un espacio en blanco
        if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
            node.parentNode.removeChild(node);
    }
}
/*
 Verifica si hay algun div de la paleta de colores ya pulsado (con la clase seleccionado) 
 y eliminar el anterior seleccionado
 */
function verificarColorSeleccionado()
{
    var nodosColores = document.getElementById('colores').childNodes;
    limpiarNodos(document.getElementById('colores'));
    for (var i = 0; i < nodosColores.length; i++)
    {
        var listaClases = nodosColores[i].classList;
        for (var j = 0; j < listaClases.length; j++) {
            if (listaClases[j] == 'seleccionado')
            {
                nodosColores[i].classList.remove('seleccionado');
            }
        }
    }
}

//Comprobar si existe un color seleccionado
function comprobarColorSeleccionado()
{
    var nodosColores = document.getElementById('colores').childNodes;
    limpiarNodos(document.getElementById('colores'));
    for (var i = 0; i < nodosColores.length; i++)
    {
        var listaClases = nodosColores[i].classList;
        for (var j = 0; j < listaClases.length; j++) {
            if (listaClases[j] == 'seleccionado')
            {
                return true;
            }
        }
    }
    return false;
}

// Añadir la clase seleccionado al color pulsado
function cambiarSeleccionado(div)
{
    verificarColorSeleccionado();
    //Añadir una clase al elemento
    document.getElementById(div.id).className += " seleccionado";
}

//Obtenemos el color de la paleta seleccionado mediante el id del color del css
function colorSeleccionadoPaleta()
{
    var nodosColores = document.getElementById('colores').childNodes;
    limpiarNodos(document.getElementById('colores'));
    //recorremos toda la paleta de colores
    for (var i = 0; i < nodosColores.length; i++)
    {
        var listaClases = nodosColores[i].classList;
        for (var j = 0; j < listaClases.length; j++) {
            if (listaClases[j] == 'seleccionado')
            {
                //Obtienes las distintas reglas de la hoja 0 (en este caso solo tenemos una por eso ponemos 0)
                //sino recorreriamos todas la css con un for
                var estilos = document.styleSheets[0].cssRules;
                for (var k = 0; k < estilos.length; k++)
                {
                    //comparamos con "selectorText" el nombre de la regla con el nombre del id del color seleccionado
                    if (estilos[k].selectorText == '#' + nodosColores[i].id)
                    {
                        //obtenemos el background de la hoja 
                        color = estilos[k].style.backgroundColor;
                    }
                }
            }
        }
    }
    return color;
}

//Verificar si el lapiz está activo
function verificarLapiz(td)
{
    // verificar si existe color en el lapiz y si esta un color de la paleta seleccionado
    if (document.getElementById('colorSeleccionado').style.backgroundColor === '' && comprobarColorSeleccionado() === true)
    {
        var colorObtenido = colorSeleccionadoPaleta();
        document.getElementById('colorSeleccionado').style.backgroundColor = colorObtenido;
        td.style.backgroundColor = colorObtenido;
        anadirEventos();
    }
    if (comprobarColorSeleccionado() !== false)
    {
        document.getElementById('colorSeleccionado').style.backgroundColor = '';
        verificarColorSeleccionado();
        
    }
    if(document.getElementById('colorSeleccionado').style.backgroundColor ==='')
    {
        eliminarEventos();
    }
}

function pintar(td)
{
    var colorObtenido = colorSeleccionadoPaleta();
    td.style.backgroundColor = colorObtenido;
}


function ev(x, y, z) {
    if (document.addEventListener) {
        x.addEventListener(y, z, false);
    } else {
        x.attachEvent('on' + y, z);
    }
}

function evEliminar(x, y, z) {
    if (document.removeEventListener) {
        document.removeEventListener(y, z, false);
        x.removeEventListener(y, z, false);
    } else if(x.detachEvent) {                   // For IE 8 and earlier versions
        document.detachEvent('on' + y, z);
        x.detachEvent('on' + y, z);
    }
}

function anadirEventos()
{
    var tds = document.getElementById('tablero').getElementsByTagName('td');
    for (var i = 0; i < tds.length; i++)
    {
        ev(tds[i],'mouseover',function(){pintar(this);});
    }
}

function eliminarEventos()
{
    var tds = document.getElementById('tablero').getElementsByTagName('td');
    for (var i = 0; i < tds.length; i++)
    {
        evEliminar(tds[i],'mouseover',function(){pintar(this);});
    }
}

[replica]

Sin haber probado el código, y sin tener la costumbre de retirar los eventos una vez puestos, yo diría que no hace falta pasar la función como anónima al eliminar ese evento:

Código Javascript:

function eliminarEventos()
{
    var tds = document.getElementById('tablero').getElementsByTagName('td');
    for (var i = 0; i < tds.length; i++)
    {
        evEliminar(tds[i],'mouseover',pintar;});
    }
}
 

Es más, creo que no se pueden retirar eventos que se han añadido como anónimos:

Código Javascript:

function anadirEventos()
{
    var tds = document.getElementById('tablero').getElementsByTagName('td');
    for (var i = 0; i < tds.length; i++)
    {
        ev(tds[i],'mouseover',function(){pintar(this);});
    }
}
 

El pasar la función como anónima function(){pintar(this) es lo que no te permite eliminar ese evento. Tendrás que buscar otra solución.