javascript - 普通javaScript事件监听器在页面加载时触发，如何防止

我试图使用常规的javaScript创建一个事件侦听器，当单击它时，将调用一个函数并与之一起传递数据。该函数获取数据并在警报中返回。在下面的代码中，该功能和警报会在页面加载时触发，而不是按需单击时触发。

<button data-id="777" id="dataClicker">Load Data</button>
<span id="response"></span>
<script>
var dataElement = document.getElementById('dataClicker');
dataElement.addEventListener('click', myFunction(dataElement));
function myFunction(dataElement) {
    var dataId = dataElement.getAttribute('data-id');
    alert(dataId);
}
</script>

我猜更具体的问题是如何编写在普通香草javaScript中如此轻松地在jQuery中完成的代码？

<div class="photos">
    <img src="/img/cakes/1.jpg" alt="Patisserie JuJu" width="800" height="800" />
    <img src="/img/cakes/2.jpg" alt="Patisserie JuJu" width="800" height="800" />
    <img src="/img/cakes/3.jpg" alt="Patisserie JuJu" width="800" height="800" />
</div>

$(document).ready(function(){
    $('.photos img').click(function(){
        window.open($(this).attr('src'));
    });
});

最佳答案

您调用myFunction并将其返回值传递给addEventlistener而不是传递myFunction本身。固定：

<button data-id="777" id="dataClicker">Load Data</button>
<span id="response"></span>
<script>
var dataElement = document.getElementById('dataClicker');
dataElement.addEventListener('click', () => myFunction(dataElement));
function myFunction(dataElement) {
    var dataId = dataElement.getAttribute('data-id');
    alert(dataId);
}
</script>