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>

基本上......我的代码生成两个按钮prev和next，以及几个显示图像的框。忽略这些框，现在，我只是想让click事件发挥作用。

此代码似乎不会产生任何可点击的内容。不确定我的问题在哪里。请解释一下你的答案。谢谢！

Answer 1

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

onclick应为click。

请记住，在＆lt; IE9，使用attachEvent()时使用on前缀。

Answer 2

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

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

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

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

您还在绑定DOM ready事件后直接添加侦听器。这不行。您需要等到load被触发，直到您在调用addListeners之前生成按钮

function load()
{
    // snip

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

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

2 个答案: