笔记
1：e1.preventDefault();这是组织浏览器的默认行为产生。
2：function(e1) 函数里加上e ，防止时间冒泡出现，冒泡就是时间影响其他地方的事件。
3：num=e.keyCode; num= e此时键盘按下的数值。
4： e.clientX x坐标 。
5：属性是否只存在对象中 用 对象.hasOwnProperty("属性")
6：构造函数的 原型 用 prototype
对象用 proto
7：Array 中 新增一个方法x，可以压入一个元素
Array.prototype.x1=function(a){
this.push(a)
}
8：console.log(dog instanceof Dog) 判断dog是不是Dog的对象(实例)
9：document.body.offsetHeight
document.body.offsetWidth获取此时屏幕的 宽 长。
10：构造函数都存在1个隐藏的对象 原型对象 prototype
11：获取当前滚动条的位置
var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
12：//仅用 Dogkj.prototype= new Dog();不能传参数 否则后面新建全是这个参数；
13：冒充只能冒充 函数里面的属性，写在外面的行为不能冒充
14： 游戏引擎，因为只有一个，用 字面量的形式会更好；
var gGameBox = {
rows: 20, // 行数
cols: 20, // 列数
allTds: [], // 存储所有的td元素对象
// 方法： 游戏开始
start: function() {
gGameBox.init(); // 游戏初始化
},
// 初始化
init: function() {
// 场景布置好, 用表格来做
var oTable = document.createElement("table");
for (var i = 0; i < gGameBox.rows; i++)
{
// 创建tr
var oTr = document.createElement("tr");
// 每一行，定义1个空数组
var arr = [];
for (var j = 0; j < gGameBox.cols; j++) {
// 创建td
var oTd = document.createElement("td");
oTr.appendChild(oTd);
// 将td放到空数组中
arr.push(oTd);
}
// 将当前行所有的td，压入到 allTds 属性中
gGameBox.allTds.push(arr);
oTable.appendChild(oTr);
}
// 添加到body
document.body.appendChild(oTable);
}
};
面向对象写 鼠标拖动的物体：
1：先获取物体
var oImg = document.getElementById("box")
2:鼠标按下 开始运行函数oImg.onmousedown= function(e1){
因为鼠标拖动后物体移动是的点在 物体的左上角，所以要算一下：（1）鼠标到物体边缘的长度
var dateX = e1.clientX -oImg.offsetLeft;
（2）鼠标放在物体里开始移动，物体的左上角与鼠标的差值，var x = e2.clientX -dateX ;
（3）把鼠标所在的left top 赋值给物体的left top:oImg.style.left= x+"px"
oImg.style.top= y+"px"
（4）鼠标抬起事件，不让物体移动：oImg.onmouseup=function(){
window.onmousemove=null;D
}
整个函数就是
var oImg = document.getElementById("22")
oImg.onmousedown= function(e1){
e1.preventDefault();
var dateX = e1.clientX -oImg.offsetLeft;
var dateY = e1.clientY -oImg.offsetTop;
console.log(e1.clientX+","+oImg.offsetLeft+"</br>")
window.onmousemove=function(e2){
var x = e2.clientX -dateX ;
var y = e2.clientY -dateY ;
console.log(e2.clientX+","+dateX)
oImg.style.left= x+"px"
oImg.style.top= y+"px"
}
//图片顶点左边 按照这个移动
}
oImg.onmouseup=function(){
window.onmousemove=null;D
}
面向对象方法
1：先找到对象 function Box(){
this.ele=document.getElementById("a22")
}
2:设置属相 之前要保留this,为了和后面程序混淆，不知this 所指。
var state=this;
3：对象的行为-（1） 鼠标按下事件
this.ele.onmousedown=function(e){
e.preventDefault();
state.dateX=e.clientX-state.ele.offsetLeft;
state.dateY=e.clientY-state.ele.offsetTop;
state.star();
document.onmouseup=function(){
state.stop();
}
}
15:
鼠标按下后- 组织浏览器默认行为-计算小差值-调用开始-鼠标抬起停止；
（2）开始行为
this.star=function(e){
document.onmousemove=function(e){
var x = e.clientX - state.dateX;
var y = e.clientY - state.dateY;
state.move(x,y);
}
}
计算鼠标移入物体移动的差值-并且调用移动
（3）移动 计算的数值赋值给物体
this.move=function(x,y){
state.ele.style.left=x+"px"
state.ele.style.top=y+"px"
}
（4）停止行为
this.stop=function(){
document.onmousemove=null
}
4：调用对象 var a=new Box();
a.move(40,50);
可以直接设置物体的初始位置。
总结： 面向对象一环套一环。因为时间是连续的。
可以 继承 并且修改继承。
继承 /冒充
function A(){
B.call(this,参数)
}
这段程序是A 要继承B的属性 ，this 不能省略，this 后面 的参数是继承的第一个参数。
A.prototype = new B(); A要继承B的行为，还可以继承后再修改。
A.prototype.move=function(x，y){
B.prototype.move.call(this,x,y)
this.ele.innerHTML=x+","+y;
}
A继承B的move行为的（x,y）
并且继承过来后修改了move.
new A();调用A；
