如何调试 JavaScript .onclick 事件？答案

【问题标题】：How do I debug JavaScript .onclick event?如何调试 JavaScript .onclick 事件？
【发布时间】：2014-06-02 20:52:32
【问题描述】：

我有一段代码在页面完全加载时执行。然后该函数收集我的 HTML 页面上的所有按钮元素。从这里我循环获取每个按钮的title 属性，然后将onclick 事件分配给按钮，该事件等于写入带有标题的console.log 的函数。

我尝试了各种方法，但都不起作用。这是我正在使用的 JavaScript 代码。目前它所做的只是循环调用函数并将磁贴记录到console.log，但这不应该发生。每次我单击按钮时，它都应该调用带有标题的函数并记录下来。

window.onload = myPageIsReady;

function myPageIsReady(){

    var myList = document.getElementsByTagName("button");
    var myTitle = [];


    for(var i = 0; i < myList.length; i++){ 
        myTitle[i] = myList[i].getAttribute("title");       
        myList[i].onclick = getMyTitle(myTitle[i]);
    };

    function getMyTitle(myTitle){
        console.log(myTitle);
    };

};

【问题讨论】：

标签： javascript

【解决方案1】：

说我疯了，但是……

var myList = document.getElementsByTagName("button");


for(var i = 0; i < myList.length; i++){ 
    myList[i].onclick = function(){
        console.log(this.getAttribute("title"));
    }
};

【讨论】：

这可行，但这不是一个好习惯，因为您总是为每次迭代创建一个匿名函数，即使该函数总是做同样的事情。
@undefined: 好吧，在这种情况下，您可以只写myList[i].onclick = getMyTitle; 并通过this.getAttribute('title') 获取getMyTitle() 中的值。但如果它是一个任意的计算值，人们可能会争论将其附加到对象并通过this 引用：myList[i].arbValue = i*i;。

【解决方案2】：

您必须将其设置为匿名函数：

myList[i].onclick = (function() {
  var currentI = i;
  return function() { 
      getMyTitle(myTitle[currentI]);
  }
})();

（取自here）

【讨论】：

我试过这样做，但我点击的每个按钮都会在日志中返回“未定义”。
这个答案是错误的编辑：这个答案不断变化

【解决方案3】：

你需要使用：

window.onload = myPageIsReady;

而不是

window.onload = myPageIsReady();

以下是我的解决方案，它创建一个函数 getMyTitle 并将其分配给 onclick。这是代码的示例链接：http://jsfiddle.net/3Xg3s/6/

window.onload = myPageIsReady;

function getMyTitle() {
    alert(this.title)
};

function myPageIsReady() {
    var myList = document.getElementsByTagName("button");
    for (var i = 0; i < myList.length; i++) {
        myList[i].onclick = getMyTitle;
    };
};

【讨论】：