我制作了一个小应用程序，当单击猫的图片时，该应用程序会增加计数器。当我使用默认参数设置该函数时，它就可以工作。但是，当我向它传递一个字符串以在函数中替换时，它不会。这两个脚本有什么区别？
第一个脚本，不将字符串传递给 catClick 函数:
'use strict';
function CatCount (pic_url, cat_name) {
this.pic_url = pic_url;
this.click_count = 0;
this.cat_name = cat_name;
return false;
}
var cat_name;
var pic_url;
var click_count;
function catClick() {
var cat_click_p = document.getElementById("number_clicked");
var number = cat_click_p.innerHTML;
number = parseInt(number) + 1;
cat_click_p.innerHTML = number;
}
var catGrid = document.getElementById('cat_grid');
catGrid.addEventListener('click', catClick, false);
以及脚本的第二个版本，它将字符串传递给 catClick 函数:
'use strict';
function CatCount (pic_url, cat_name) {
this.pic_url = pic_url;
this.click_count = 0;
this.cat_name = cat_name;
return false;
}
var cat_name;
var pic_url;
var click_count;
function catClick(element_id_to_be_replaced) {
var cat_click_p = document.getElementById(element_id_to_be_replaced);
var number = cat_click_p.innerHTML;
number = parseInt(number) + 1;
cat_click_p.innerHTML = number;
}
var catGrid = document.getElementById('cat_grid');
catGrid.addEventListener('click', catClick('number_clicked'), false);
脚本的第二个版本仅将猫计数器增加一次。
此外，这里是 index.html 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript' src='js/app.js'></script>
<title>Cat App</title>
</head>
<body>
<div>
This app keeps track of how many times you click on a cat!
<div class='cat' id='cat_grid'>
<img src='http://thepetproductguru.com/wp-content/uploads/2012/05/CAT-HEADPHONES.jpeg'>
</div>
<div>
This cat has been clicked
<p id='number_clicked'>0</p>
times.
</div>
</body>
</html>
最佳答案
问题出在下面一行:
catGrid.addEventListener('click', catClick('number_clicked'), false);
在该行中，您执行 catClick('number_clicked') 并将该表达式的结果作为第二个参数返回到 addEventListener功能。
两种可能的解决方案是:
//1: Using an anonymous function:
catGrid.addEventListener('click', function() {
catClick('number_clicked')
}, false);
//2: Using bind:
catGrid.addEventListener('click', catClick.bind(this,'number_clicked'), false);
关于javascript - 将字符串传递给函数与使用默认参数调用函数之间的区别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31949399/