Javascript addEventListener不管函数的名称在第二个参数中是什么
Javascript addEventListener does it matter what the name of the function is in the second parameter?
函数的名称在addEventListern（Parm1，Parm2，Parm3）的第二个参数中重要吗
我认为错误可能是因为并不是所有的调用都被重命名为特定的函数名。有几次调用该函数，我认为这可能是导致错误的原因。
我的代码与下面的代码配合使用。您可以在画布上拖动圆圈。
theCanvas.addEventListener("mousedown", mouseDownListener, false);
但如果我将代码更改为以下内容。
theCanvas.addEventListener("mousedown", er, false);
并将mouseDownListener方法重命名为er。我可以拖动圆圈，但当我释放鼠标时，圆圈会一直跟随鼠标指针。这似乎是一种奇怪的行为，我不确定为什么会这样
问题：第二个参数函数的名称必须是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>
第二个参数必须是对触发事件时要调用的函数的引用。
传递函数时，可以将其调用为任何、有效javascript标识符。
第二个函数可以调用任何东西。如果您忘记在函数名的每次出现时重命名（尤其是在禁用等情况下），则可能会导致您通过将函数重命名为er来描述的行为
不，天花板猫不会强迫您将函数名设置为任何值。你可以随意命名。
第二个参数只是对您之前定义的函数的引用，您可以将任何函数（甚至是匿名函数）放在那里。
此语句中的第二个参数可以是任何有效的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
}
出于编程目的，我会在函数名中添加"load"名称，这样两年后你就会记住函数与load参数有关。我会买一本关于Javascript的简单书，并使用Notepad++来浏览一些简单的例子，因为即使在使用了过去6个月的Javascript之后，我仍然觉得它在某些事情上有点难以应付。有了HTML5，你可能会经常使用这些事件，所以我会尽可能多地了解Javascript事件。
相关文章：
- 当第二个参数为空时管理JavaScript调用的构造
- 筛选器's的第二个参数不起作用
- jQuery Datepicker BeforeShowDay 第二个参数
- 添加第二个参数时，Javascript函数将停止工作
- JavaScript 部分应用函数 - 如何仅绑定第二个参数
- 何时适合将集合传递给主干模型构造函数第二个参数
- 下划线.js : _.where(） 使用第一个参数，但不适用于第二个参数
- 如何在setInterval函数中生成第二个参数(持续时间）的随机持续时间值
- 如何将jquery对象转移到“On”方法(第二个参数）
- 是否可以将值数组作为第二个参数传递给 _.without(） 函数
- JSON.stringify(）工作不正常-第二个参数消失
- 结合Supercrollorama，TweenMax.to中第二个参数的含义是什么
- 简单`replace(）`的第二个参数存在问题
- retrieve(）中的第二个参数;始终在运行
- Javascript中reduce回调中的第二个参数
- 可以't在addEventListener方法的第二个参数中添加括号
- 骨干路由器多参数;第二个参数未定义
- JavaScript中JSON.stringify中的第二个参数
- 如果第二个参数再次是替换方法，则JavaScript替换不起作用
- 如何在Mootools fireEvent函数的第二个参数中访问对象实例
