TypeError: $(...).addEventListener is not a function

Question

setTimeout(function() {
        $.ajax({
        url : "handlers/H_AnnotationHandler.php",
        data : "case_id=<?=$case_id?>&plink=<?=$plink?>&mode=get",
        type : "post",
        dataType : "json",
        success : function (response) {
            if (!response.error) {
                annotation_length = response.annots.length;
                for (var i = 0; i < response.annots.length; i++) {
                    var elt  = document.createElement("div");
                    elt.id = "runtime-overlay" + i;
                    elt.className = "highlight";
                    viewer.addOverlay({
                        element: elt,
                        location : viewer.viewport.imageToViewportRectangle(parseInt(response.annots[i].rect_x), parseInt(response.annots[i].rect_y), parseInt(response.annots[i].rect_w), parseInt(response.annots[i].rect_h))
                    });
                    $("#runtime-overlay"+i).attr("onclick", "$.clickOverlay('"+i+"')");
                }
            }               
        }
    });
    }, 3000);

    $.clickOverlay = function(whichOverlay) {
            var flag = 0;
            $("#runtime-overlay"+whichOverlay).addEventListener("mousedown", function(){
                flag = 0;
            }, false);
            $("#runtime-overlay"+whichOverlay).addEventListener("mousemove", function(){
                flag = 1;
            }, false);
            $("#runtime-overlay"+whichOverlay).addEventListener("mouseup", function(){
                if(flag === 0){
                    console.log("click");
                }
                else if(flag === 1){
                    console.log("drag");
                }
            }, false);
    }

Why i get an type error for addeventlistener ? Can you help me, i try to understand click or drag. so i added that functions in my click event : How to distinguish mouse "click" and "drag"

ERROR : Uncaught TypeError: $(...).addEventListener is not a function

Answer 1

As a comment pointed out, You are trying to use the "vanilla" javascript way to add an eventlistener on a jQuery object.

$.clickOverlay = function(whichOverlay) {
        var flag = 0;
        $("#runtime-overlay"+whichOverlay).addEventListener("mousedown", function(){
            flag = 0;
        }, false);
        $("#runtime-overlay"+whichOverlay).addEventListener("mousemove", function(){
            flag = 1;
        }, false);
        $("#runtime-overlay"+whichOverlay).addEventListener("mouseup", function(){
            if(flag === 0){
                console.log("click");
            }
            else if(flag === 1){
                console.log("drag");
            }
        }, false);
}

instead try:

$.clickOverlay = function(whichOverlay) {
        var flag = 0;
        $("#runtime-overlay"+whichOverlay).on("mousedown", function(){
            flag = 0;
        });
        $("#runtime-overlay"+whichOverlay).on("mousemove", function(){
            flag = 1;
        });
        $("#runtime-overlay"+whichOverlay).on("mouseup", function(){
            if(flag === 0){
                console.log("click");
            }
            else if(flag === 1){
                console.log("drag");
            }
        });
}

Answer 2

addEventListener is the javascript way to listen for events, but you call it on a JQuery object. Give a look at JQuery.on() to manage events using JQuery.