0

大家，早安，

我目前正在尝试在网页上添加一点动态，所以我决定使用事件监听器来加载外部页面而不重新加载所有页面。

从这一点开始，我制作了以下测试页面内容：

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

在第二种情况下，当click事件被触发时，浏览器将调用 function listenerReference，因为它是附加到事件的侦听器。请注意，这种方法与以前的方法不同on+event，因为可以轻松地addEventListener在同一事件上添加大量侦听器，同时需要更多代码。on+event

于 2013-08-02T09:04:53.810 回答