Click 事件侦听器关闭的困难

Question

我目前正在学习 Udacity 课程 'Javascript Design Patterns'，我在完成题为尴尬的作业时遇到了一些麻烦 'Cat Clicker'。您应该能够单击列表中的一只猫的名字，它应该会增加 'Cat count' 跨度。我似乎无法让 "cat_list" 的点击事件侦听器正常工作。一旦我将事件侦听器置于闭包中，它似乎不再执行任何操作。没有闭包，只有最后一只猫获得事件监听器。任何信息将不胜感激，谢谢。也将不胜感激有关调试点击的信息。

JSFiddle 代码： http://jsfiddle.net/pzagjdx4/1/ 源代码：

index.html

<html>
<body>
  <span > Cat count: </span>
  <span id="cat_span">0</span>
  <div id="cat_div">
  </div>
  <div id="cat_list">
  </div>
  <script src="cat-clicker.js"></script>
</body>
</html>

猫-clicker.js

function catClick(){
    var cat_span = document.getElementById("cat_span");
    var number = cat_span.innerHTML;
    number++;
    cat_span.innerHTML = number;
}

function listClick(name, id_num){
    document.getElementById("cat_div").innerHTML = '<p id="cat_name_'+name+'">'+name+'</p>\
                     <img id="cat_img_'+id_num+'" src="cat.jpg">';
}


var Cat = function(input_name, id_num) {
    var name = input_name;
    var id_num = (function() {
        var id = 0;
        return function() { return id++; };
    })();
    var cat_list = (function(name, id_num){
        var list = [];
        return function() {list.append([name, id_num])};
    })(name, id_num);
    document.getElementById("cat_list").innerHTML += '<p id="cat_list_'+name+'">'+name+'</p>';
    // var new_list = document.getElementById("cat_list_"+name);
    // new_list.addEventListener('click', catClick, false);
    //THIS IS WHERE THE PROBLEM IS=====
    (function(name, id_num){
        var new_list = document.getElementById("cat_list_"+name);
        return function() {new_list.addEventListener('click', catClick, false)};
    })(name, id_num);
    //=====
    var div = document.createElement('div');
    document.getElementById("cat_div").innerHTML = '<p id="cat_name_'+name+'">'+name+'</p>\
                     <img id="cat_img_'+id_num+'" src="cat.jpg">';
    var new_cat = document.getElementById("cat_img_"+id_num);
    new_cat.addEventListener('click', catClick, false);

};

var cat_0 = new Cat('Kitty');
var cat_1 = new Cat('Cat');

Answer 1

您正在返回一个函数，并且永远不会调用该新函数。

(function(name, id_num){
    var new_list = document.getElementById("cat_list_"+name);
    return function() {new_list.addEventListener('click', catClick, false)};  <-- does nothing
})(name, id_num);

应该就是

(function(name, id_num){
    var new_list = document.getElementById("cat_list_"+name);
    new_list.addEventListener('click', catClick, false);
})(name, id_num);

按照编写代码的方式，甚至不需要用函数包装它。

Answer 2

而且你只有一张猫图片，因为你覆盖了第一张图片：

document.getElementById("cat_list").innerHTML = '<p id="cat_list_'+name+'">'+name+'</p>';

将=改为+=。

Click 事件侦听器关闭的困难

Difficulty With Click Event Listener In Closure

javascript

closures

listener