我的带有 addEventHandler/click 的 JS 代码不起作用？

Question

<script>
    var counter = 0;
    //Loads all the elements and assigns event handlers
    function load()
    {
        //create and append prev button
        
        loadPeople(counter);
        
        var btnNext = document.createElement("div");
        btnNext.setAttribute("class", "button");
        btnNext.setAttribute("id", "n");
        btnNext.innerHTML = "Next"
        root.appendChild(btnNext);
        
    }
    
    function loadPeople(index)
    {
        //This creates and appends several boxes with photos to represent various people
    }
    
    function addListeners()
    {
        //Add listeners
        //Previous
         
        //Next
        var eventNextClick = document.getElementById("n");
        eventNextClick.addEventListener("onclick", next, true);
    }
    
    //This should fire when next button is clicked
    function next()
    {
        alert("This works");
    }

    document.addEventListener("DOMContentLoaded", load, false)
    addListeners();
    
</script>

基本上......我的代码生成两个按钮上一个和下一个，以及几个显示图像的框。忽略这些框，现在，我只是想让点击事件起作用。

这段代码似乎没有产生任何可点击的内容。不确定我的问题出在哪里。请解释你的答案。

Answer 1

eventNextClick.addEventListener("onclick", next, true);

onclick 应该只是 click。

但请记住，在< IE9，使用 attachEvent() 时使用 on 前缀。

Answer 2

eventNextClick.addEventListener("onclick", next, true);

您需要使用 "click" 而不是 "onclick"

您可能还想将第三个参数设置为 false，因为默认情况下您要使用冒泡。

document.addEventListener("DOMContentLoaded", load, false)
addListeners();

您还可以在绑定 DOM 就绪事件后直接添加侦听器。这行不通。您需要等到 load 触发并生成按钮，然后才能调用 addListeners

function load()
{
    // snip

    // invoke add listeners here instead
    addListeners();
}