0

おはようございます。

現在、Web ページに少し動的なものを追加しようとしているので、すべてのページをリロードせずにイベント リスナーを使用して外部ページをロードすることにしました。

この時点から、次のテスト ページ コンテンツを作成しました。

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" media="all" href="./assets/css/style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><h1>Tagline of the page</h1></li>
                <li id="login"><h1><a href="#" id="authentication">Classic Authentication</a></h1></li>
            </ul>
        </nav>
    </header>
    <section id='messages'>
        <p class="title">I'm sorry dave, but you can't access this facility right now!</p>
    </section>
    <script src="/assets/scripts/ajax.js"></script>
</body>
</html>

Javascript:

function loadview(url, id) {
    var xhr_object = null; 

    if (window.XMLHttpRequest) { 

        xhr_object = new XMLHttpRequest();

        xhr_object.open("GET", url, true);

        xhr_object.onreadystatechange = function(){

            if (xhr_object.readyState != 4) { 
                return;
            }

            if (xhr_object.status != 200 && xhr_object.status != 304 && xhr_object.status !=0){
                console.log("erreur :" + xhr_object.status);
                return;
            }
            document.getElementById(id).innerHTML = xhr_object.responseText;
        };
    xhr_object.send();
    }
}

var element = document.getElementById('authentication');
var target = document.getElementById('messages');
element.addEventListener("click",loadview('/views/auth_form.html',target.id),false);

ここで、私の問題は、ジョブを正しく実行していないイベント リスナーから発生しています。ID 'authentication'で識別される要素でイベントクリックが検出されたときにloadview()関数を実行するように彼に依頼しましたが、代わりに、ページが読み込まれるとすぐにイベント リスナーが loadview 関数を実行しています。私のために、あなたの助けを求めます SOF 達人 ^^

特に Js の部分では、私のコードがきれいではなく、かなり醜いことはわかっていますが、私のloadview()関数が正しく機能していることも知っています。また、古いスタイルのインラインonclick()メソッドを使用すると、完璧に動作します。

この特定のトピックについて手がかりが得られた場合は、私が聞いています;-) すべての改善アドバイスは受け入れられますが、最初に問題を解決したいので、このコードを実際にきれいにしたくないことに注意してください。

このコードはテストのみを目的としているため、完全にクリーンでなくても、個人的な学習以外は気にしません ;-)

4

1 に答える 1

5

addEventListener呼び出す関数への参照が必要です。あなたがしているのは、コンパイラがその行に到達したときに実行される関数の結果を参照として渡すことです。これは正しくありません(関数は戻り値がないため、 を返しますundefined)。メソッドへの参照として渡すことができるように、コードを関数にラップする必要があります。

element.addEventListener("click", function() { 
    loadview('/views/auth_form.html', target.id);
}, false);

これはいわゆるanonymous functionであり、通常のものでも実行できます。

function listenerReference() {
    loadview('/views/auth_form.html', target.id);
}
element.addEventListener("click", listenerReference, false); //passing the reference to the function

この 2 番目のケースでは、イベントが発生すると、イベントに追加されたのはリスナーであるためclick、ブラウザーは関数を呼び出します。このアプローチは、同じイベントに多くのリスナーを簡単に追加できるため、より多くのコードが必要になるためlistenerReference、このアプローチとは異なることに注意してください。on+eventaddEventListeneron+event

于 2013-08-02T09:04:53.810 に答える