5

我在让 OnChnage 侦听器工作时遇到问题，如果我将脚本</form>放置在标签之后，侦听器工作正常，但如果我将脚本放在<head>标签内，它就无法工作。

在我的网站上，我只能在标签中包含脚本，<head>我可以做些什么来使脚本在<head>标签中运行？

在此配置中，脚本不起作用

<head>
<script type="text/javascript">
if(window.addEventListener) {
    document.getElementById('address').addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
    document.getElementById('address').attachEvent("onchange", loadXMLDoc);
}

function loadXMLDoc(){
   alert('worked');
}
</script>
</head>

<body>
<form>

<input id="address" name="address" type="text"/>
<input id="test" name="test" type="text"/>

 </form>
4

3 回答 3

6

这么说吧：

<head>
<script type="text/javascript">
window.onload= function () {
    if(window.addEventListener) {
        document.getElementById('address').addEventListener('change', loadXMLDoc, false);
    } else if (window.attachEvent){
        document.getElementById('address').attachEvent("onchange", loadXMLDoc);
    }

    function loadXMLDoc(){
       alert('worked');
    }
}
</script>
</head>
于 2012-08-29T19:39:31.223 回答
1

将您的代码放入window.onload函数中：

<head>
<script>
    window.onload = function() {
        if(window.addEventListener) {
            document.getElementById('address').addEventListener('change', loadXMLDoc, false);
        } else if (window.attachEvent){
            document.getElementById('address').attachEvent("onchange", loadXMLDoc);
        }

        function loadXMLDoc(){
            alert('worked');
        }
    }
</script>
<body>
    ...
</body>
于 2012-08-29T19:41:02.493 回答
0

当您将脚本放在 中时<head>，您正在使用的元素document.getElementById尚不存在。在添加事件侦听器之前等待窗口加载。

您需要等待窗口加载 jQuery$(document).ready或向窗口添加加载的侦听器：

window.addEventListener('load',addListener,false);
function addListener() {
    //your code here
}
于 2012-08-29T19:39:09.373 回答