在方法中添加了 HTML Javascript 事件处理答案

【问题标题】：HTML Javascript event handling added in a method在方法中添加了 HTML Javascript 事件处理
【发布时间】：2017-06-13 11:56:35
【问题描述】：

var p=0;
function addLine() {
    var tb = document.getElementById("tb");
    var row = document.createElement("TR");
    var td1 = document.createElement("TD");
    var td2 = document.createElement("TD");
    var td3 = document.createElement("TD");
    var textF = document.createElement("INPUT");
    textF.value = "Add image URL";
    td1.appendChild(textF);
    var bt = document.createElement("BUTTON");
    bt.id = p;
    p++;
    var text = document.createTextNode("Load Image");
    td2.appendChild(bt);
    bt.appendChild(text);
    var img = document.createElement("IMG");
    img.alt = "No image loaded yet";
    td3.appendChild(img);
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    tb.appendChild(row);
    row.children[1].children[0].onClick = load();
}

function load() {
        console.log("in method");
        //var bt = window.event.target;
        var i = 0;
        var tb = document.getElementById("tb");
        tb.rows[i].cells[2].children[0].alt = "Image not found";
        tb.rows[i].cells[2].children[0].src = tb.rows[i].cells[0].children[0].value;
}

我想为每个生成的按钮添加一个事件处理程序，我也尝试使用addEventListener()，但似乎没有任何效果。并且由于某种原因，当addLine() 方法被激活时，我得到控制台输出“in method”。我也想让事件创建的事件对象来获取目标。

【问题讨论】：

因为它是 onclick 而不是 onClick 并且您正在调用 load 并将其返回的内容分配给 onclick 事件侦听器。
但是我还需要将导致的事件作为参数传递给方法，以便能够获取它的目标。

标签： javascript html events event-handling dom-events

【解决方案1】：

问题是事件区分大小写，因此它必须全部小写。您正在调用该函数并将其返回的内容分配给事件侦听器。

所以你需要把它全部变成小写并去掉 ()

row.children[1].children[0].onclick = load;

或

bt.addEventistener("click", load);

【讨论】：

【解决方案2】：

在 addLine() 函数的末尾添加这个：

jQuery:

$(bt).on('click', function(){
 /* your code here*/
})

js:

bt.addEventListener('click', function(){
/* your code here */
}, false)

或：

 bt.addEventListener('click', load)

【讨论】：