Question

我正在尝试使用常规的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'));
    });
});

Answer 1

您调用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>

Answer 2

在您的示例中，您甚至不需要该参数，因为已经定义了dataElement：

var dataElement = document.getElementById('dataClicker');

dataElement.addEventListener('click', myFunction);

function myFunction() {
    var dataId = dataElement.getAttribute('data-id');
    alert(dataId);
}

请注意，我打电话给('click', myFunction)而不是像{Mohrn解释的那样，叫('click', myFunction())。

普通javaScript事件列表器在页面加载时触发，如何防止

2 个答案: