Javascript在内部工作,而不是在外部

Javascript works Internally but Not Externally

本文关键字:外部 在内部 工作 Javascript      更新时间:2023-09-26

js代码似乎是工作时,我放置在HTML代码,但不工作时,我把它放在外部可以有人请解释为什么?当放置在外部时,我将脚本标签放在</body>之前这是HTML代码,JS代码是一个简单的可拖动div

HTML

<html>
    <head>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id="container">
            <div id="main-view">
                <h1>Hello Welcome to the Site</h1>
                <div id="dxy">  <!--Draggable -->
                    <p>Hello Drag me Around!</p>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="js/drag.js"></script>
    </body>
</html>

JS

window.onload = addListeners();
function addListeners(){
    document.getElementById('dxy').addEventListener('mousedown',mouseDown,false);
    window.addEventListener('mouseup',mouseUp,false);
}
function mouseUp(){
    window.removeEventListener('mousemove',divMove,true);
}
function mouseDown(e){
    window.addEventListener('mousemove',divMove,true);
}
function divMove(e){
    var div = document.getElementById('dxy');
    div.style.position = 'absolute';
    div.style.top = e.clientY + 'px';
    div.style.left = e.clientX = 'px';
}
window.onload = addListeners();

必须是

window.onload = addListeners;