Javascript 为什么addEventListener只执行my函数，而不为其创建mouseover/mouseon事件？
我有一项任务，但我似乎无法理解这一部分： 我已经编写了一个Javascript函数，根据img html标记的ID从“img”文件夹为每个图像标记预加载/预缓存两个图像。这部分很好用 但是，使用Javascript 为什么addEventListener只执行my函数，而不为其创建mouseover/mouseon事件？,javascript,image,dom-events,addeventlistener,Javascript,Image,Dom Events,Addeventlistener,我有一项任务，但我似乎无法理解这一部分： 我已经编写了一个Javascript函数，根据img html标记的ID从“img”文件夹为每个图像标记预加载/预缓存两个图像。这部分很好用 但是，使用addEventListener在mouseover和mouseout上更改图像的功能似乎不起作用，我就是不明白为什么！如果我调试，我可以看到图像加载良好，没有错误。然而，在鼠标上方它似乎不起作用 HTML页面： <!DOCTYPE HTML> <html> <hea
addEventListenermouseovermouseout鼠标上方<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Nilay Panchal"/>
<meta name="description" content="Part 1 Assignment 3"/>
<title>HomePage</title>
<script src="js/breadcrumb.js"></script>
<script src="js/preloader.js"></script>
<script type="text/javascript">
function animal(name,scientificName,typeOfFood,sleepingPattern,size) {
this.name = {
realName:name,
scientificName:scientificName
};
this.typeOfFood = typeOfFood;
this.sleepingPattern = sleepingPattern;
this.size = size;
}
function makeNewAnimal(name, scientificName, typeOfFood,sleepingPattern,size) {
var animalClicked = new animal(name, scientificName, typeOfFood,sleepingPattern,size);
var finalStringObject = "{"+myOwnRecursiveToStringMethod(animalClicked,"")+"}";
document.getElementById("stringOfObject").value = finalStringObject;
var backToObject = parseStringAndConvertToObject(finalStringObject);
document.getElementById("jsonDisplay").value = backToObject;
}
function myOwnRecursiveToStringMethod(objectToParse, outputString) {
var first = 1;
for(nameOfProperty in objectToParse){
if(objectToParse[nameOfProperty] instanceof Object) {
outputString += nameOfProperty+":{";
outputString = myOwnRecursiveToStringMethod(objectToParse[nameOfProperty],outputString);
outputString += "},";
} else{
outputString = outputString + nameOfProperty +":'"+ objectToParse[nameOfProperty]+"',";
}
}
if(outputString.charAt(outputString.length-1) == ',') {
outputString = outputString.slice(0,-1);
}
return outputString;
}
function parseStringAndConvertToObject(finalString) {
eval("var backToObject = "+finalString);
return backToObject;
}
</script>
</head>
<body>
<h3>Navigation List:</h3>
<nav id="navigationBar" style="border-style: double ;border-width: 10">
<ul>
<li><a href="#">Assignment 3 Root</a></li>
<li><a href="Animals/index.html">All Animals</a>
<ul>
<li><a href="Animals/Insects.html">Insects.html</a></li>
<li><a href="Animals/Birds/index.html">Birds-Aves</a>
<ul>
<li><a href="Animals/Birds/Pelican/index.html">The Mighty Pelican</a></li>
</ul>
</li>
<li><a href="Animals/Giraffe/index.html">The Tall Giraffe</a></li>
<li><a href="Animals/Rhino/index.html">The Hefty Rhinoceros</a></li>
</ul>
</li>
</ul>
</nav>
<div style="border-style:groove;padding-bottom: 10px;padding-left: 10px">
<h4><u>BREADCRUMB:</u></h4>
<div id="breadcrumb"></div>
</div>
<div style="text-align: center">
<h3><u>Please click on any of the images below and the JSON object of the animals data will be displayed in the text area below!</u></h3>
<a href="javascript:void(0);" onclick="makeNewAnimal('Pelican','Pelecanus','Pescatarian','Diurnal','Small')"><img style="width:300px;height:300px" id='pelican' alt="Pelican"/></a>
<a href="javascript:void(0);" onclick="makeNewAnimal('Rhinoceros','Rhinocerotidae','Herbivore','Diurnal','Large')"><img style="width:500px;height:300px" id="rhino" alt="Rhinoceros"/></a>
<br>
<a href="javascript:void(0);" onclick="makeNewAnimal('Giraffe','Giraffa camelopardalis','Herbivore','Diurnal','Very Large')"><img style="width:500px;height:300px" id="giraffe" alt="Giraffe"/></a>
<a href="javascript:void(0);" onclick="makeNewAnimal('Owl','Strigiformes','Carnivore','Nocturnal','Very Small')"><img style="width:300px;height:300px" id='owl' alt="Owl"/></a>
</div>
<hr>
<h5>Animal Objects to String:</h5>
<textarea style="width:100%" id="stringOfObject"></textarea>
<h5>Animal Strings back to Objects</h5>
<textarea style="width:100%" id="jsonDisplay"></textarea>
</body>
<script type="text/javascript">
window.onload = precacheAndLoad();
makeBreadcrumb(location.pathname);
</script>
</html>
主页
功能动物（名称、科学名称、食物类型、睡眠模式、大小）{
this.name={
realName:name，
科学名称：科学名称
};
this.typeof食品=食品类型；
this.sleepingPattern=sleepingPattern；
这个。大小=大小；
}
函数makeNewAnimal（名称、科学名称、食物类型、睡眠模式、大小）{
var animalClicked=新动物（名称、科学名称、食物类型、睡眠模式、大小）；
var finalStringObject=“{”+myownRecursiveToString方法（animalClicked“”+“}”；
document.getElementById（“stringOfObject”）.value=finalStringObject；
var backToObject=parseStringAndConvertToObject（finalStringObject）；
document.getElementById（“jsonDisplay”）.value=backToObject；
}
函数myownRecursiveToString方法（objectToParse，outputString）{
var first=1；
对于（objectToParse中的财产名称）{
如果（objectToParse[nameOfProperty]对象实例）{
outputString+=nameOfProperty+“：{”；
outputString=MyownRecursiveToString方法（objectToParse[nameOfProperty]，outputString）；
outputString+=“}，”；
}否则{
outputString=outputString+nameOfProperty+“：”+objectToParse[nameOfProperty]+“，”；
}
}
if（outputString.charAt（outputString.length-1）='，'）{
outputString=outputString.slice（0，-1）；
}
返回输出字符串；
}
函数parseStringAndConvertToObject（最终字符串）{
eval（“var backToObject=“+finalString”）；
返回到对象；
}
导航列表：
-
-
面包屑：
请单击下面的任何图像，动物数据的JSON对象将显示在下面的文本区域中！
要字符串的动物对象：
动物字符串返回到对象
window.onload=precacheAndLoad（）；
makeBreadcrumb（location.pathname）；
/*
*
*下面我编写了一个函数来执行所有的图像操作和预处理。要添加新图像，只需执行以下操作：
*1）包括JS文件，并在HTML页面上添加新的img标记。这个img标签的ID应该是动物的名字（例如河马）。
*2）保存两个与动物名称相同的图像，默认图像后缀为1和2，并将鼠标悬停在图像上。（如hippo1.jpg和hippo2.jpg）
*脚本将处理剩下的部分！
*/
var allImageVariables=新数组（）；
函数precacheAndLoad（）{
var allImages=document.getElementsByTagName（“img”）；
对于（imageCount=0；imageCount，因为在使用addEventListener（）
时，您正在执行函数并传递返回结果，而不是传递对函数的引用forfor/*
*
* Below I wrote a function to perform all the image operations and precaching too. To add a new image simply do the following:
* 1) Include, the JS file and add a new img tag on the HTML page. The ID of this img tag should be the name of the animal (eg. hippo).
* 2) Save two images named the same as the animal, with a suffix of 1 and 2 for default image and hover over image. (eg. hippo1.jpg and hippo2.jpg)
* The script will take care of the rest!
*/
var allImageVariables = new Array();
function precacheAndLoad() {
var allImages = document.getElementsByTagName("img");
for(imageCount=0; imageCount<allImages.length ; imageCount++) {
currentImageId = allImages[imageCount].id;
eval("var "+currentImageId+"1 = new Image(300,300)");
eval("var "+currentImageId+"2 = new Image(300,300)");
eval(currentImageId+"1.src = 'img/"+currentImageId+"1.jpg'");
eval(currentImageId+"2.src = 'img/"+currentImageId+"2.jpg'");
allImageVariables[imageCount] = eval(currentImageId+"1");
allImageVariables[imageCount+allImages.length] = eval(currentImageId+"2");
allImages[imageCount].src = eval(currentImageId+"1.src");
allImages[imageCount].addEventListener("mouseover", hoverImage(currentImageId,imageCount+allImages.length), false);
allImages[imageCount].addEventListener("mouseout", outImage(currentImageId,imageCount), false);
}
}
function hoverImage(currentImageId, arrayIndexOfImageVariable) {
eval("document.getElementById('"+currentImageId+"').src = allImageVariables[arrayIndexOfImageVariable].src");
}
function outImage(currentImageId, arrayIndexOfImageVariable) {
eval("document.getElementById('"+currentImageId+"').src = allImageVariables[arrayIndexOfImageVariable].src");
}
还有，你到底为什么要像现在这样使用
eval（）(function(imageCount, currentImageId) {
allImages[imageCount].addEventListener("mouseover", function() {
hoverImage(currentImageId,imageCount+allImages.length);
}, false);
allImages[imageCount].addEventListener("mouseout", function() {
outImage(currentImageId,imageCount);
}, false);
})(imageCount, currentImageId);
eval("var "+currentImageId+"1 = new Image(300,300)");
eval("var "+currentImageId+"2 = new Image(300,300)");
eval(currentImageId+"1.src = 'img/"+currentImageId+"1.jpg'");
eval(currentImageId+"2.src = 'img/"+currentImageId+"2.jpg'");
而不是使用
eval（）声明变量 eval("var "+currentImageId+"1 = new Image(300,300)");
eval("var "+currentImageId+"2 = new Image(300,300)");
eval(currentImageId+"1.src = 'img/"+currentImageId+"1.jpg'");
eval(currentImageId+"2.src = 'img/"+currentImageId+"2.jpg'");
var images = [];
images.push(new Image(300,300));
images.push(new Image(300,300));
images[0].src = 'img/'+currentImageId+'1.jpg');
images[1].src = 'img/'+currentImageId+'2.jpg');