Question

我正在尝试学习NodeJs和MongoDb以及掌握javascript（使用js来创建整个GUI和功能）我认为我已经拥有了Node但是我遇到了一个问题，即向GUI添加onclick事件并且同时具有良好且易于维护的代码。刚从头开始，所以代码现在非常简短。

此代码有些火灾＆＃34; onclick＆＃34;仅在页面加载期间发生的事件...

set.seed(24)
d <- data.frame(Purpose=sample(LETTERS[1:5], 20, replace=TRUE), 
      Good.Loan=sample(c('GoodLoan', 'BadLoan'),20, replace=TRUE))

结果当前只有2个用户存在于数据库中，因此它会触发每个用户拥有两个函数，因为有两个链接都有onclick事件）

var httpRequest;
document.body.onload = populateTable;

var userListData = [];

// Fill table with data
function populateTable() {
    httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        try {
            if (httpRequest.readyState === 4) {
              if (httpRequest.status === 200) {
                var res = JSON.parse(httpRequest.responseText);
                userListData = res;
                res.forEach(function (element, index, array) {
                    var tr = newElement("tr");
                    tr.appendChild(newElement("td")).appendChild(newElement("a", {href : "#", class : "linkshowuser", rel : element.username, innerHTML : element.username, onclick : showUserInfoObject(element)}));
                    tr.appendChild(newElement("td", {innerHTML : element.email}));
                    tr.appendChild(newElement("td")).appendChild(newElement("a", {href : "#", class : "linkshowuser", rel : element._id, innerHTML : "delete", onclick : showUserInfo(element.username)}));
                    document.getElementById("tbody").appendChild(tr);
                });
              } else 
                alert('There was a problem with the request.');
            }
        } catch (e) {
            alert('Caught Exception: ' + e.description);
        }
    };
    httpRequest.open('GET', '/users/userlist');
    httpRequest.send();    
};

function newElement (type, attrs) {
    var element = document.createElement(type);
    for(var a in attrs)
        element[a] = attrs[a];
    return element;
}

function findUserByName (username) {
    for (var i in userListData)
        if (userListData[i].username == username)
            return userListData[i];
}

function showUserInfo (username) {
    console.log("Delete?", findUserByName(username));
}

function showUserInfoObject (user) {
    console.log("UserName", user);
}

我怎么设法创造一个工作但它看起来很丑：

UserName Object {_id: "55dc7a2c20b546741e030902", username: "test1", email: "test1@test.com", fullname: "Bob Smith", age: 27…}
test.js:47 Delete? Object {_id: "55dc7a2c20b546741e030902", username: "test1", email: "test1@test.com", fullname: "Bob Smith", age: 27…}
test.js:51 UserName Object {_id: "55dc9844135f4517d5388b24", username: "test1", email: "test1@test.com", fullname: "Bob Smith", age: 27…}
test.js:47 Delete? Object {_id: "55dc7a2c20b546741e030902", username: "test1", email: "test1@test.com", fullname: "Bob Smith", age: 27…}

它产生预期结果，仅在链接被点击时打印。

是否有一个外观漂亮且易于维护的方法？

Answer 1

您不应按如下方式分配事件处理程序......

onclick : showUserInfoObject(element)

分配时，它只是寻找功能的名称。这就是你的代码在分配时执行的原因。

onclick : showUserInfoObject

函数的参数由事件定义，通常是事件对象。你不能提供任务，除非你做这样的事情，但我不建议，基于这个问题......

onclick : function () {showUserInfo(element.username);}

事件处理程序通常像这样分配，没有“on”...

newElement.addEventListener('click', showUserInfo, false);

有关MDN参考的信息，请参阅this

希望这会有所帮助......

纯Java脚本onclick事件概率

1 个答案: