Fatal编程技术网
  • javascript/
  • Javascript addEventListener第二个参数中的函数名是否重要？

Javascript addEventListener第二个参数中的函数名是否重要？

javascript

Javascript addEventListener第二个参数中的函数名是否重要？,javascript,Javascript,addEventListern（Parm1、Parm2、Parm3）的第二个参数中的函数名是否重要 我认为错误可能是因为并非所有调用都重命名为该特定函数名。有几次调用该函数，我认为这可能是导致错误的原因 我的代码与下面的代码一起工作。可以围绕画布拖动圆 theCanvas.addEventListener("mousedown", mouseDownListener, false); 但是如果我把代码改成下面的 theCanvas.addEventListener("mousedown",

addEventListern（Parm1、Parm2、Parm3）的第二个参数中的函数名是否重要

我认为错误可能是因为并非所有调用都重命名为该特定函数名。有几次调用该函数，我认为这可能是导致错误的原因

我的代码与下面的代码一起工作。可以围绕画布拖动圆

 theCanvas.addEventListener("mousedown", mouseDownListener, false);
但是如果我把代码改成下面的

 theCanvas.addEventListener("mousedown", er, false);
还将mousedownlister方法重命名为er，我可以拖动圆圈，但当我释放鼠标时，圆圈会一直跟随鼠标指针。这似乎是一种奇怪的行为，我不确定为什么会这样

问题：第二个参数函数名必须是mousedownlister，还是可以是临时名称？

HTML代码：

<!doctype html>

<html lang="en">
<head>
<style type="text/css">
   h4 {font-family: sans-serif;}
   p {font-family: sans-serif;}
   a {font-family: sans-serif; color:#d15423; text-decoration:none;}
</style>
<title>HTML5 Canvas Example - Simple Dragging Objects</title>
<script type="text/javascript">
window.addEventListener("load", canvasApp, false);

var Debugger = function() { };

Debugger.log = function(message) {
    try {
        console.log(message);
    }
    catch (exception) {
        return;
    }
}

function canvasApp() {
    var theCanvas = document.getElementById("canvasOne");
    var context   = theCanvas.getContext("2d");

    init();

    var numShapes;
    var shapes;
    var dragIndex;
    var dragging;
    var mouseX;
    var mouseY;
    var dragHoldX;
    var dragHoldY;

    function init() {
        numShapes = 1;
        shapes    = [];
        makeShapes();
        drawScreen();
        theCanvas.addEventListener("mousedown", mouseDownListener, false);
    }

    function makeShapes() {
        var i;
        var tempX;
        var tempY;
        var tempRad;
        var tempR;
        var tempG;
        var tempB;
        var tempColor;

            for (i=0; i < numShapes; i++) {
                tempRad = 10 + Math.floor(Math.random()*25);
                tempX = Math.random()*(theCanvas.width  - tempRad);
                tempY = Math.random()*(theCanvas.height - tempRad);
                tempR = Math.floor(Math.random()*255);
                tempG = Math.floor(Math.random()*255);
                tempB = Math.floor(Math.random()*255);
                tempColor = "rgb(" + tempR + "," + tempG + "," + tempB +")";
                tempShape = {x:tempX, y:tempY, rad:tempRad, color:tempColor};
                shapes.push(tempShape);
            }
    }

     //main function for when the mouse button is clicked -- Once everything is loaded everything depends on this function     
    function mouseDownListener(evt) {
        var i;
        var highestIndex = -1;

        var bRect = theCanvas.getBoundingClientRect();
        mouseX = (evt.clientX - bRect.left)*(theCanvas.width/bRect.width);
        mouseY = (evt.clientY - bRect.top)*(theCanvas.height/bRect.height);

        //find which shape was clicked
        for (i=0; i < numShapes; i++) {
            if  (hitTest(shapes[i], mouseX, mouseY)) {
                dragging = true;
                    if (i > highestIndex) {
                        dragHoldX = mouseX - shapes[i].x;
                        dragHoldY = mouseY - shapes[i].y;
                        highestIndex = i;
                        dragIndex = i;
                    }
            }
        }

        if (dragging) {
            window.addEventListener("mousemove", mouseMoveListener, false);
        }

        theCanvas.removeEventListener("mousedown", mouseDownListener, false);
        window.addEventListener("mouseup", mouseUpListener, false);

        if (evt.preventDefault) {
            evt.preventDefault();
        } //standard
        else if (evt.returnValue) {
            evt.returnValue = false;
        } //older IE
    return false;
    }


   function mouseUpListener(evt) {
        theCanvas.addEventListener("mousedown", mouseDownListener, false);
        window.removeEventListener("mouseup", mouseUpListener, false);

        if (dragging) {
            dragging = false;
            window.removeEventListener("mousemove", mouseMoveListener, false);
        }
     }

    function mouseMoveListener(evt) {
        var posX;
        var posY;
        var shapeRad = shapes[dragIndex].rad;
        var minX = shapeRad;
        var maxX = theCanvas.width - shapeRad;
        var minY = shapeRad;
        var maxY = theCanvas.height - shapeRad;

        var bRect = theCanvas.getBoundingClientRect();
        mouseX = (evt.clientX - bRect.left)*(theCanvas.width/bRect.width);
        mouseY = (evt.clientY - bRect.top)*(theCanvas.height/bRect.height);

        posX = mouseX - dragHoldX;
        posX = (posX < minX) ? minX : ((posX > maxX) ? maxX : posX);
        posY = mouseY - dragHoldY;
        posY = (posY < minY) ? minY : ((posY > maxY) ? maxY : posY);

        shapes[dragIndex].x = posX;
        shapes[dragIndex].y = posY;

        drawScreen();
    }

    function hitTest(shape,mx,my) {
        var dx;
        var dy;
        dx = mx - shape.x;
        dy = my - shape.y;
        return (dx*dx + dy*dy < shape.rad*shape.rad);
    }

    function drawShapes() {
        var i;

        for (i=0; i < numShapes; i++) {
            context.fillStyle = shapes[i].color;
            context.beginPath();
            context.arc(shapes[i].x, shapes[i].y, shapes[i].rad, 0, 2*Math.PI, false);
            context.closePath();
            context.fill();
        }
    }

    function erraseCanvas() {
        context.clearRect(0,0,theCanvas.width,theCanvas.height);
    }

    function clearTheScreenWithRectangle() {
        context.fillStyle = "#000000";
        context.fillRect(0,0,theCanvas.width,theCanvas.height);
    }

    function drawScreen() {
        //erraseCanvas();
        clearTheScreenWithRectangle();
        drawShapes();                 
    }
}
</script>
</head>
<body>
<div style="top: 50px; text-align:center">
    <canvas id="canvasOne" width="1000" height="500">
    Your browser does not support HTML5 canvas.
    </canvas>
</div>
</body>
</html>


h4{字体系列：无衬线；}
p{font-family:sans-serif；}
{字体系列：无衬线；颜色：#d15423；文本装饰：无；}
HTML5画布示例-简单拖动对象
window.addEventListener（“加载”，canvasApp，false）；
var Debugger=function（）{}；
Debugger.log=函数（消息）{
试一试{
控制台日志（消息）；
}
捕获（例外）{
返回；
}
}
函数canvasApp（）{
var theCanvas=document.getElementById（“canvasOne”）；
var context=canvas.getContext（“2d”）；
init（）；
numShapes变种；
变量形状；
var-dragIndex；
var拖动；
var mouseX；
var mouseY；
德拉戈尔德变种；
var dragHoldY；
函数init（）{
numShapes=1；
形状=[]；
制作形状（）；
纱窗（）；
Canvas.addEventListener（“mousedown”，mousedown Listener，false）；
}
函数makeShapes（）{
var i；
var tempX；
var tempY；
var tempRad；
var-tempR；
var tempG；
var tempB；
颜色；
对于（i=0；i高指数）{
dragHoldX=mouseX-shapes[i].x；
dragHoldY=mouseY-shapes[i].y；
高指数=i；
dragIndex=i；
}
}
}
如果（拖动）{
window.addEventListener（“mousemove”，mousemovelListener，false）；
}
Canvas.removeEventListener（“mousedown”，mousedown Listener，false）；
window.addEventListener（“mouseup”，mouseUpListener，false）；
如果（evt.preventDefault）{
evt.preventDefault（）；
}//标准
else if（evt.returnValue）{
evt.returnValue=false；
}//老一辈
返回false；
}
功能鼠标定位器（evt）{
Canvas.addEventListener（“mousedown”，mousedown Listener，false）；
removeEventListener（“mouseup”，mouseUpListener，false）；
如果（拖动）{
拖动=假；
removeEventListener（“mousemove”，mouseMoveListener，false）；
}
}
函数mouseMoveListener（evt）{
var-posX；
var posY；
var shapeRad=shapes[dragIndex].rad；
var minX=shapeRad；
var maxX=canvas.width-shapeRad；
var minY=shapeRad；
var maxY=canvas.height-shapeRad；
var bRect=canvas.getBoundingClientRect（）；
mouseX=（evt.clientX-bRect.left）*（canvas.width/bRect.width）；
鼠标=（evt.clientY-bRect.top）*（canvas.height/bRect.height）；
posX=mouseX-dragHoldX；
posX=（posXmaxX）？maxX:posX）；
posY=mouseY-dragHoldY；
posY=（posYmaxY）？maxY:posY）；
形状[dragIndex].x=posX；
形状[dragIndex].y=posY；
纱窗（）；
}
功能hitTest（形状、mx、my）{
var-dx；
变量dy；
dx=mx-shape.x；
dy=my-shape.y；
返回（dx*dx+dy*dy   window.addEventListener("load", canvasApp, false);

   window.addEventListener("load", ILoveBaseballANDApplePie, false);
   window.addEventListener("load", Pizza, false);
   window.addEventListener("load", AnyOtherName, false);


   function Pizza() {
       //do some code here
   }

   function ILoveBaseballANDApplePie() {
       //do some code here
   }