0

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

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

如果我试图在事件监听器之后重做代码，它会说引用错误，因为我在声明之前调用了函数。

帮助初学者。

4

1 回答 1

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 的结果。

于 2019-11-01T22:31:59.223 回答