'addeventlistener is not a Function', why does this occur?

Question

Hello! In my code the console displays me the following error: Uncaught Typeerror: d.addeventlistener is not a Function, I use Jquery. I already changed the addeventlistener for on, does not return me error, but the code does not work.

Just follow my lead:

function clickOnIndices(carrosselPai) {
var carouselIndice = carrosselPai.find('.indice');
var carousel = carrosselPai.find('.carousel');
carouselIndice.click(function (e) {
    e.preventDefault();
    var $this = $(this);
    var indice = $this.data('indice');

    if( ! $this.hasClass('active') ) {
        carouselIndice.removeClass('active');
        $this.addClass('active')
    }

    if( indice === 0 ) {
        carousel.css('left', 0);
    } else  {
        carousel.css('left', '-' + indice + '00%');
    }
});
carouselIndice.eq(0).click();

// Touch Events
carrosselPai.addEventListener("touchstart", handleStart, false);
carrosselPai.addEventListener("touchmove", handleMove, false);
carrosselPai.addEventListener("touchcancel", handleCancel, false);
carrosselPai.addEventListener("touchend", handleEnd, false);

var posIniX = 0;
var posFimX = 0;
var posIniY = 0;
var posFimY = 0;
var changePage = false;
function handleStart(evt) {
    posIniX = evt.touches[0].pageX;
    posIniY = evt.touches[0].pageY;
    changePage = false;
    console.log(evt);
}
function handleMove(evt) {
    posFimX = evt.touches[0].pageX;
    posFimY = evt.touches[0].pageY;
    changePage = true;
}
function handleEnd() {
    var scrollActive = carrosselPai.find('.indice.active');
    if( changePage) {
        var difX = (posIniX - posFimX);
        if( difX > 50 ) {
            // Move para direita
            scrollActive.next('.indice').click();
            changePage = false;
        } else if( difX < -50 ) {
            // Move para esquerda
            scrollActive.prev('.indice').click();
            changePage = false;
        } else {
            scrollActive.find('.scroll').click();
            return false;
        }
    }
    changePage = false;
}
function handleCancel() {
    changePage = false;
}

}

function commentsCarousel (carrosselPai, qtdeToShow) {
if(carrosselPai.length) {
    var carousel = carrosselPai.find('.carousel');
    var tamUtil = carrosselPai.width();
    qtdeToShow = qtdeToShow || 3;
    var qtdeItems = carousel.find('.item').length;

    // Verifica se a divisão ficará correta
    for(; (qtdeItems % qtdeToShow) !== 0;){
        qtdeItems++;
    }

    var tamTotalPai = (qtdeItems * tamUtil) / qtdeToShow;
    var percentualTotal = (tamTotalPai * 100) / tamUtil;
    var tamItem = tamTotalPai / qtdeItems;
    var percentualUni = (tamItem * 100) / tamTotalPai;

    carousel.css('width', percentualTotal + '%');
    carousel.find('.item').css('width', percentualUni + '%');

    // Coloca os indices
    for (var i = 0; i < (percentualTotal / 100); i++) {
        carrosselPai.append('<a class="indice" href="#" data-indice="'+ i +'"></a>');
    }

    clickOnIndices(carrosselPai);
}

}

commentsCarousel($('#carousel'), 1);

Answer 1

You can use the event on jQuery. So:

carrosselPai.on("touchstart", function(e){ handleStart(e); });
carrosselPai.on("touchmove", function(e){ handleMove(e); });
carrosselPai.on("touchcancel", function(e){ handleCancel(e); });
carrosselPai.on("touchend", function(e){ handleEnd(e); });

Thus passing the events to their respective functions

Answer 2

Try this

// Touch Events carrosselPai[0].addEventListener("touchstart", handleStart, false); carrosselPai[0].addEventListener("touchmove", handleMove, false); carrosselPai[0].addEventListener("touchcancel", handleCancel, false); carrosselPai[0].addEventListener("touchend", handleEnd, false);