求助让一段JS代码行为分离

Question

<script>
var bounce = {
    x:0, y:0, w:200, h:200,   // Window position and size
    dx:5, dy:5,               // Window velocity窗口速度
    interval: 100,            // Milliseconds between updates毫秒更新
    win: null,                // The window we will create
    timer: null,              // Return value of setInterval()    // Start the animation
    start: function() {
         // Start with the window in the center of the screen
        /* if(bounce.win && bounce.x != (screen.width - bounce.w)/2){ 
 bounce.win.moveTo(bounce.x,bounce.y);bounce.win.close()}
 else {*/
 bounce.x = (screen.width - bounce.w)/2;
 bounce.y = (screen.height - bounce.h)/2;
 //}
 
// Create the window that we're going to move around
         // The javascript: URL is simply a way to display a short document
         // The final argument specifies the window size
         
 bounce.win = window.open('javascript:"<h1>BOUNCE!</h1>"', "", 
                                  "left=" + bounce.x + ",top=" + bounce.y +
                                  ",width=" + bounce.w + ",height=" +bounce.h+
                                  ",status=yes");
         
         // Use setInterval() to call the nextFrame() method every interval 
         // milliseconds. Store the return value so that we can stop the
         // animation by passing it to clearInterval().
         bounce.timer  = setInterval(bounce.nextFrame, bounce.interval);
    },    // Stop the animation
    stop: function() {
         clearInterval(bounce.timer);                // Cancel timer
         if (!bounce.win.closed) bounce.win.close(); // Close window
    },
/*pause:function() {bounce.win.moveTo(bounce.x,bounce.y);clearInterval(bounce.timer);bounce.win.focus();},*/
// Display the next frame of the animation.  Invoked by setInterval()
    nextFrame: function() {
         // If the user closed the window, stop the animation
         if (bounce.win.closed) {
             clearInterval(bounce.timer);
             return;
         }
         
         // Bounce if we have reached the right or left edge
         if ((bounce.x+bounce.dx > (screen.availWidth - bounce.w)) ||
             (bounce.x+bounce.dx < 0)) bounce.dx = -bounce.dx;
         
         // Bounce if we have reached the bottom or top edge
         if ((bounce.y+bounce.dy > (screen.availHeight - bounce.h)) ||
             (bounce.y+bounce.dy < 0)) bounce.dy = -bounce.dy;
         
         // Update the current position of the window
         bounce.x += bounce.dx;
         bounce.y += bounce.dy;
         
         // Finally, move the window to the new position
         bounce.win.moveTo(bounce.x,bounce.y);         // Display current position in window status line
         bounce.win.defaultStatus = "(" + bounce.x + "," + bounce.y + ")";
    }
}
</script>
<button onclick="bounce.start()">Start</button>
<button onclick="bounce.pause()">Pause</button>
<button onclick="bounce.stop()">Stop</button>
如何让上述代码中JS和HTML彻底分离，让onclick不在html里，试了DOM，操作不能
代码中注释 pause和 start的开始if部分是我加的，做成暂停效果，有兴趣的话请把pause和start按钮合成一体实现开始暂停功能

Answer 1

$(function(){
    window.onload = function() {
       document.getElementById("start").onclick = bounce.start;
       document.getElementById("pause").onclick = bounce.pause;
       document.getElementById("stop").onclick = bounce.stop;
       
    };
});
<button id="start">start</button>
<button id="pause">pause</button>
<button id="stop">stop</button>

Answer 2

使用Jtemplate加载html元素，使用Jquery动态绑定事件，你的页面要做的就是引入css和js就可以了!

Answer 3

$不懂，现在还在看JavaScript权威指南，jQuery不知道，你的代码加进去有错误啊
我改成这样window.onload = function(){
var btn = document.getElementsByTagName("button");
btn[0].onclick = function(){bounce.start();}
btn[1].onclick = function(){bounce.pause();}
btn[btn.length - 1].onclick = function(){bounce.stop();}

}可以了可是我想用 文本节点来判断时 就失败了
for(i=0;i<btn.length;i++){
var text = btn[i].firstChild.nodeValue
btn[i].onclick = function(){
if(text = "Start") bounce.start()
else if(text = "Pause") bounce.pause();
else  bounce.stop();}
}就出现窗口无法暂停 停止
还有 就是这段代码我改了后 stop按钮后 再start就无法出现新窗口
<script>
var bounce = {
    x:0, y:0, w:200, h:200,   // Window position and size
    dx:5, dy:5,               // Window velocity窗口速度
    interval: 100,            // Milliseconds between updates毫秒更新
    win: null,                // The window we will create
    timer: null,              // Return value of setInterval()    // Start the animation
    start: function() {
         // Start with the window in the center of the screen
         if(bounce.win && bounce.x != (screen.width - bounce.w)/2){ 
 bounce.win.moveTo(bounce.x,bounce.y);bounce.win.close()}
 else {
 bounce.x = (screen.width - bounce.w)/2;
 bounce.y = (screen.height - bounce.h)/2;
 }
 
// Create the window that we're going to move around
         // The javascript: URL is simply a way to display a short document
         // The final argument specifies the window size
         
 bounce.win = window.open('javascript:"<h1>BOUNCE!</h1>"', "", 
                                  "left=" + bounce.x + ",top=" + bounce.y +
                                  ",width=" + bounce.w + ",height=" +bounce.h+
                                  ",status=yes");
         
         // Use setInterval() to call the nextFrame() method every interval 
         // milliseconds. Store the return value so that we can stop the
         // animation by passing it to clearInterval().
         bounce.timer  = setInterval(bounce.nextFrame, bounce.interval);
    },    // Stop the animation
    stop: function() {
         clearInterval(bounce.timer);                // Cancel timer
         if (!bounce.win.closed) bounce.win.close(); // Close window
    },
pause:function() {bounce.win.moveTo(bounce.x,bounce.y);clearInterval(bounce.timer);bounce.win.focus();},
// Display the next frame of the animation.  Invoked by setInterval()
    nextFrame: function() {
         // If the user closed the window, stop the animation
         if (bounce.win.closed) {
             clearInterval(bounce.timer);
             return;
         }
         
         // Bounce if we have reached the right or left edge
         if ((bounce.x+bounce.dx > (screen.availWidth - bounce.w)) ||
             (bounce.x+bounce.dx < 0)) bounce.dx = -bounce.dx;
         
         // Bounce if we have reached the bottom or top edge
         if ((bounce.y+bounce.dy > (screen.availHeight - bounce.h)) ||
             (bounce.y+bounce.dy < 0)) bounce.dy = -bounce.dy;
         
         // Update the current position of the window
         bounce.x += bounce.dx;
         bounce.y += bounce.dy;
         
         // Finally, move the window to the new position
         bounce.win.moveTo(bounce.x,bounce.y);         // Display current position in window status line
         bounce.win.defaultStatus = "(" + bounce.x + "," + bounce.y + ")";
    }
}
window.onload = function(){
var btn = document.getElementsByTagName("button");
btn[0].onclick = function(){bounce.start();}
btn[1].onclick = function(){bounce.pause();}
btn[btn.length - 1].onclick = function(){bounce.stop();}
/*for(i=0;i<btn.length;i++){
var text = btn[i].firstChild.nodeValue
btn[i].onclick = function(){
if(text = "Start") bounce.start()
else if(text = "Pause") bounce.pause();
else  bounce.stop();}
}*/}
</script>
<!--button onclick="bounce.start()">Start</button>
<button onclick="bounce.pause()">Pause</button>
<button onclick="bounce.stop()">Stop</button-->
<button>Start</button>
<button>Pause</button>
<button>Stop</button>        

Answer 4

var text = btn[i].firstChild.data;

Answer 5

使用jquery 请引用 jquery-版本号-.js文件  = = 话说，咱还是用jq比较多$是jquery里的东西
lz有时间的话，推荐你看看jquery，比如《锋利的jquery》之类的，入门比较快，选择器部分看懂了基本就可以用jq了。。

Answer 6

等JS看完基本书再去看jQuery，jQuery的本身开发目的应该是给熟练操作JS的人用的吧

Answer 7

话是没错，不过有时候任务比较急，学习曲线可以跳跃下，jquery开始用了以后，有空再看dom和JS的内容也行的