Question

我有两个这样的代码：

myFunc();

function myFunc() {
    var e = document.getElementByClassName("link"),
        i = e.length;
    while (i--) {
        e[i].addEventListener("click", function() {
            //do stuff for each a.link
        }, false);
    }
}

和

function myFunc() {
    //do stuff for each a.link
}

var e = document.getElementByClassName("link"),
    i = e.length;

while (i--) {
    e[i].addEventListener("click", function() {
        myFunc()
    }, false);
}

对于第一个，我可以使用this var c = this.getAttribute("href")来获取a.link属性。

但第二个看起来有更好的效果，因为只要点击myFunc()，它就会调用a.link

哪一个对页面速度真的更好？

修改
在ajax调用期间，myFunc将被多次使用。

Answer 1

第二种方法绝对是使用事件委托模型的正确方法。它的性能也稍微好一点，因为它避免了第一个需要的额外函数调用，因为你正在调用myFunc()进行设置，而不是像第二种方法那样只进行设置。

如果您不需要在代码中的其他位置使用myFunc()，则可以更简单地将处理程序编写为：

var e = document.getElementById("link");
e.addEventListener("click", function() {
    // Do all the stuff myFunc does. The 'this' keyword will represent the <a> tag
}, false);

或者，您仍然可以单独声明myFunc()并将额外的函数定义保存在处理程序中：

function myFunc() {
   // Do stuff. The 'this' keyword will represent the '<a>' tag when 
   // triggered by clicking the <a> tag because it is being called directly 
   // by the handler and has the same scope. It will not represent the
   // <a> tag if you call myFunc() directly somewhere else in the code.
};

var e = document.getElementById("link");
e.addEventListener("click", myFunc, false);

Answer 2

浏览器供应商强烈建议Web开发人员不要盲目盯着基准测试。供应商优化了最常见的做事方式。如果方法A比方法B快，但方法B获得牵引力，那么方法B将来可能也会很快。

话虽这么说，你的第一个代码示例对我来说很奇怪。保持简单。不要急于提高表现的易读性和可维护性。

第一个代码示例相当于：

function clickCallback() {
    console.log(this.href);
}

(function myFunc() {
    var e = document.getElementById("link");
    e.addEventListener("click", clickCallback, false);
}()); // immediate invocation

在这种情况下，将它包装在您立即执行的函数中并不会对您有所帮助。它可能会慢一些。

更新并没有太大变化。没有理由第一个例子也不能共享点击回调。根据您调用点击回调的方式，您可以保留this上下文。

单击以触发功能或调用函数来绑定单击事件？

2 个答案: