0

私はいくつかのooスタイルのjsを書くことに最初の刺し傷を作っています。ページが読み込まれると、login（）関数が2回実行され、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();

これが私のコードをテストしているウェブページです。

4

2 に答える 2

2 
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;あります。

于 2012-04-18T15:25:44.740 に答える
1

これを変える：

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

に：

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

この：

div.onclick = DA.login();

に：

div.onclick = DA.login;

いずれの場合も、関数自体をコールバックとして割り当てる必要があります。実際に関数を実行し、関数呼び出しの結果をコールバックとして割り当てています...これが、起動時に「ログイン」メソッドが2回実行され、クリックイベントが正しく機能しない理由です。

undefinedまた、最初の行から引数を 削除する必要があります。undefinedはjavascriptのキーワードであり、構文エラーが発生しなかったことに正直驚いています。次のようになります。

(function(window) {
于 2012-04-18T15:26:53.030 に答える