Question

我正在第一次尝试写一些oo风格的js。当我的页面加载时，它正在执行我的login（）函数两次，而我想要触发login（）的事件监听器根本不起作用。任何帮助将不胜感激。这是我的代码：

(function( window, undefined ) {
var document = window.document,
    navigator = window.navigator,
    location = window.location;
//build the login button
var DA = {
    width : '70px',
    height : '20px',

    createLoginButton : function(){
        var a = document.createElement('a');
        a.style.width = this.width;
        a.style.height = this.height;
        a.style.cursor = 'pointer';
        var div = document.createElement('div');
        div.id = 'da_login_button';
        div.onclick = DA.login();
        div.innerHTML = "client login";
        div.style.width = this.width;
        div.style.height = this.height;
        div.style.backgroundColor = '#59724A';
        div.style.color = 'white';
        div.style.border = '4px solid #6B5D49';
        div.style.padding = '3px';
        div.style.textAlign = 'center';
        a.appendChild(div);
        return a;
    },

    //write the button to the dom
    writeLoginButton : function(){
        var dest = document.getElementById('digital_arborist_login');
        dest.style.width = this.width;
        dest.style.height = this.height;
        var theButton = DA.createLoginButton();
        dest.appendChild( theButton );
        theButton.addEventListener("click", DA.login(), false);
    },

    //detect ssl
    isSecure : function(){
        if (location.protocol === 'https:') {
            return true;
        } else {
            return false;
        }
    },

    // the login function
    login : function(){ 
        alert('href: '+location.href+'<br />protocol: '+location.protocol);
    },

};  
window.DA = DA; 
})( window )

// start the magic
DA.writeLoginButton();

Here is the web page where I'm testing my code.

Answer 1

theButton.addEventListener("click", DA.login(), false);

在此行中将DA.login()更改为DA.login。当您执行DA.login()时，您将login()函数（undefined）的结果传递给点击处理程序，而不是函数本身。

应该是：

theButton.addEventListener("click", DA.login, false);

编辑：div.onclick = DA.login();也应为div.onclick = DA.login;。

Answer 2

改变这个：

theButton.addEventListener("click", DA.login(), false);

为：

theButton.addEventListener("click", DA.login, false);

和此：

div.onclick = DA.login();

为：

div.onclick = DA.login;

您希望在每种情况下将函数本身指定为回调。您实际上正在执行该函数并将函数调用的结果指定为回调...这就是您的“登录”方法在启动时运行两次以及您的点击事件无法正常运行的原因。

您还应该从第一行中删除undefined参数。 undefined是javascript中的关键字，我很遗憾您没有从中获得语法错误。它应该看起来像：

(function(window) {

javascript oo编程语法帮助一个菜鸟

2 个答案: