立即调用的箭头函数表达式

Question

这里是一个功能，当我单击“按钮时，它应该可以工作但令人惊讶的是，它无需调用即可立即调用！

	const show_card = (shopping_card_checkout) =>  {
		console.log("ali el-deeb");
	};
  document.querySelector('.fa-shopping-cart').addEventListener('click', show_card()) ;

如果在事件侦听器后尝试重做代码，则会在我声明之前调用函数时说引用错误。

帮助初学者。

Answer 1

看到您在JS FB组中的发帖请求，并认为我会在这里回答。

首先，您需要使用document.ready或确保所有js作为最后一个加载，否则该元素可能不存在。但这不是造成您问题的原因。我最后解释的问题是一些建议。您使用一个类和querySelector，querySelector将获取文档中的第一个元素，如果要返回所有元素，则需要querySelectorAll，这不是唯一的，还是要将相同的操作和功能绑定到许多元素？因此最好使用元素的唯一ID并使用类似以下内容：

const myElement = document.getElementById("idName");
myElement.addEventListener("click", myFynction);

const myFunction = () => console.log("Clicked");

您问题的真正原因您将函数绑定到click事件，并将其与后面的（）绑定，这会触发执行原因，因为您现在不绑定函数，但是绑定函数的结果无法将这样的参数传递给绑定事件。您将需要在函数内部获取它们，因为仅发生事件，并且可以触发回调。

所以您的工作代码是：

const show_card = (shopping_card_checkout) => console.log("ali el-deeb");
document.querySelector('.fa-shopping-cart').addEventListener('click', show_card);

如果箭头函数中只有一个return或一个语句，则不需要大括号，也无需使用return，因为它将自动返回oneliner的结果。