Javascript 如何使用EventListener将参数传递给Web套接字事件中的动态表生成的OnClick事件

我在这个网站上看到过这个问题，也在网上浏览过，但我觉得这个案例是独一无二的。我这里有几件事。首先，此页面接受web套接字消息。接下来，我将使用onClick使用最后一个单元格动态创建一个表。为了使事情进一步复杂化，我正在尝试向onClick调用的函数传递一个参数。如果我不传递任何参数，它工作正常。当有人单击图像时，我希望将原始JSON传递给我的函数。当然，这是行不通的。web浏览器控制台将evt和p1显示为未定义。尽管如此，我还是为单击操作添加了EventListener。我的猜测是我在EventListener中错误地传递了参数，但是有太多的事情发生了，我不确定是什么导致了这个问题。有人知道为什么没有调用我的clickMessageOne函数吗

window.addEventListener("load", init, false);
window.addEventListener("click", function (e) {clickMessageOne(e, p1)}, false); // doesn't work

函数init（）
{
doConnect（）
}
函数doConnect（）
{
websocket=新的websocket（“ws://192.168.1.198:8000/”；
websocket.onopen=函数（evt）{onopen（evt）}；
websocket.onclose=函数（evt）{onclose（evt）}；
websocket.onmessage=函数（evt）{onmessage（evt）}；
websocket.onerror=函数（evt）{onerror（evt）}；
}
功能开启（evt）
{
console.log（“已连接”）；
}
函数onClose（evt）
{
console.log（“断开连接的\n”）；
}
功能clickMessageOne（txt）
{
console.log（“clickMessageOne”）；
//txt应该是原始json
console.log（txt）；
} 
消息函数（evt）
{
log（“incomingJSON:+evt.data+'\n'）；
var recvObj=JSON.parse（evt.data）；
如果（recvObj.code==“测试”）
{
var table=document.getElementById（“incomingTable”）；
var行=table.insertRow（1）；
//7列
变量id=行。插入单元格（0）
var testOneCell=row.insertCell（1）；
var testTwoCell=row.insertCell（2）；
var testThreeCell=row.insertCell（3）；
var testFourCell=row.insertCell（4）；
var testFiveCell=row.insertCell（5）；
var testSixCell=row.insertCell（6）；
var testSevenCell=行插入单元格（7）；
var testEightCell=row.insertCell（8）；
id.innerHTML=“”
testOneCell.innerHTML=“传入”；
testTwoCell.innerHTML=recvObj.number；
testThreeCell.innerHTML=“”；
testFourCell.innerHTML=recvObj.time；
testFiveCell.innerHTML=“”；
testSixCell.innerHTML=recvObj.textOne；
testSevenCell.innerHTML=recvObj.textwo；
console.log（evt.data）//正确打印JSON
testEightCell.innerHTML=“”；
} 
}
函数onError（evt）
{
websocket.close（）；
}
addEventListener（“加载”，init，false）；
addEventListener（“单击”，函数（e）{clickMessageOne（e，p1）}，false）；//不起作用
函数doDisconnect（）{
websocket.close（）；
}

您的函数需要一个变量

txt

，但是您的函数调用传递了两个变量

e，p1

，这意味着一旦调用函数并且变量

e，p1

被传递给它

txt=e

。此外，您可能需要回调，因为JSON数据会在任意时间显示，当eventListener注册后，数据还没有出现。Dshiz，你是对的。非常感谢。

<script language="javascript" type="text/javascript">

    
    function init()
    {
        doConnect()
    }

    function doConnect()
    {
        websocket = new WebSocket("ws://192.168.1.198:8000/");
        websocket.onopen = function(evt) { onOpen(evt) };
        websocket.onclose = function(evt) { onClose(evt) };
        websocket.onmessage = function(evt) { onMessage(evt) };
        websocket.onerror = function(evt) { onError(evt) };
    }

    function onOpen(evt)
    {
        console.log("connected\n");
    }

    function onClose(evt)
    {
        console.log("disconnected\n");
    }

    function clickMessageOne(txt)
    {
        console.log("clickMessageOne");

        // txt should be original json
        console.log(txt);
    } 

    function onMessage(evt)
    {
        console.log("incomingJSON: " + evt.data + '\n');

        var recvObj = JSON.parse(evt.data);

        if (recvObj.code == "test")
        {
            var table = document.getElementById("incomingTable");
            var row = table.insertRow(1);

            // 7 columns
            var id = row.insertCell(0)
            var testOneCell = row.insertCell(1);
            var testTwoCell = row.insertCell(2);
            var testThreeCell = row.insertCell(3);
            var testFourCell = row.insertCell(4);
            var testFiveCell = row.insertCell(5);
            var testSixCell = row.insertCell(6);
            var testSevenCell = row.insertCell(7);
            var testEightCell = row.insertCell(8);

            id.innerHTML = ""
            testOneCell.innerHTML = "Incoming";
            testTwoCell.innerHTML = recvObj.number;
            testThreeCell.innerHTML = "";
            testFourCell.innerHTML = recvObj.time;
            testFiveCell.innerHTML = "";
            testSixCell.innerHTML = recvObj.textOne;
            testSevenCell.innerHTML = recvObj.textTwo;

            console.log(evt.data) // prints JSON correctly

            testEightCell.innerHTML = "<center><img src='test.png' onclick='clickMessageOne(evt.data)'></center>";
        } 
    }

    function onError(evt)
    {
        websocket.close();
    }

    window.addEventListener("load", init, false);
    window.addEventListener("click", function (e) {clickMessageOne(e, p1)}, false); // doesn't work

    function doDisconnect() {
        websocket.close();
    }

</script>