Question

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

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

我的代码使用以下代码。您可以在画布上拖动圆圈。

 theCanvas.addEventListener("mousedown", mouseDownListener, false);

但是，如果我将代码更改为以下内容。

 theCanvas.addEventListener("mousedown", er, false);

并且还将mouseDownListener方法重命名为呃我可以拖动圆圈但是当我释放鼠标时，圆圈会一直跟随鼠标指针。这似乎是一种奇怪的行为，我不确定为什么会这样。

问题：第二个参数函数名称是否必须完全是mouseDownListener，或者这是一个临时名称吗？

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>

Answer 1

第二个参数必须是对触发事件时要调用的函数的引用。

传递函数时，您可以将其称为任何，有效 javascript标识符。

Answer 2

第二个函数可以被称为任何东西。如果您忘记重命名每个出现的函数名称（特别是禁用它等），可能会导致您将函数重命名为er所描述的行为

Answer 3

不，天花板猫不会强迫您将功能名称设置为任何东西。你可以自由地命名它。

第二个参数只是对您之前定义的函数的引用，您可以在其中放置任何函数（甚至是匿名函数）。

Answer 4

此语句中的第二个参数可以是任何有效的javascript名称。

   window.addEventListener("load", canvasApp, false);

可以是Javascript中您想要的任何有效名称。

   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
   }

出于编程目的，我会添加＆＃34; load＆＃34;命名为函数名称的一些方法，以便2年后您将记住该函数与load参数有关。我会购买一本关于Javascript的简单书籍，并使用Notepad ++来阅读一些简单的例子，因为即使在过去6个月使用Javascript之后我仍然觉得它有点像一个野兽来对抗某些事情。使用HTML5，您可能会使用这些事件，因此我会尽可能多地了解Javascript事件。

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

4 个答案: