JS实例-事件对象

事件对象：存储了(描述了)事件更加详细的信息

    坐标信息（位置）：
    横坐标(x轴)：
        event.clientX;
        兼容：Chrome,IE系
        
        ev.clientX;
        兼容：高级浏览器
        低级：undefined

    兼容写法：
        var oEvent = ev || event;

查看当前鼠标的坐标位置：
    onmousemove -> 当你移动鼠标时候
    触发非常密 不要用alert 调试

eg:
div跟着鼠标走
*** 使用clientX,clientY 最好加上滚动宽度,高度 防止在滚动的时候DIV不跟随鼠标

事件冒泡：

子元素身上的事件，会传递给父元素，如果事件相同会执行，不相同不会执行，会继续往上冒

发生包含关系，不是平级关系

阻止事件冒泡：
oEvent.cancelBubble = true;

eg 放大镜(淘宝产品图):

a). 鼠标移入、移出small 显示、隐藏span/big
    b). 给small添加移动事件
        1. 让span 跟着鼠标走
            (减去box的offsetLeft/offsetTop)
        2. 限制范围
            1). 左边最大移动距离
            small盒模型宽度/高度-span盒模型宽度/高度
            2). 右边最大移动距离
            大img的盒模型宽度/高度-big盒模型宽度/高度
        3. 算比例
            左边X轴：scaleX = x/maxW
            左边X轴：scaleY = y/maxH
        4. 右边比例 - > 算img的left/top
    scaleX = ? / (oImg.offsetWidth-oBig.offsetWidth)
    scaleY = ? / (oImg.offsetHeight-oBig.offsetHeight)

    比例：变化的数/定死的数

键盘事件：

onkeydown 当按下键盘的时候

键位对应的键码：
oEvent.keyCode -> 键码
对应一个数字
规律
常用的键：

删除键：8
回车键：13

左键：37
上键：38
右键：39
下键：40

组合键：
*** 在js里面键码不能组合使用

    ctrl:
        ctrlKey
    shift:
        shiftKey
    alt: 
        altKey

oncontextmenu 当点击右键时候

默认行为：
右键有菜单 表单能提交 文本框能输入内容 点击a链接能跳转...

阻止默认行为：
return false;

阻止复制内容途径：
a). ctrl + c
b). 右键

eg 拖拽：
a). 按下鼠标
onmousedown 当按下鼠标的时候
b). 移动
onmousemove 当移动鼠标的时候
c). 抬起鼠标
onmouseup 当抬起鼠标的时候

问题：
    a). 快速拖拽div就不跟着走了
        解决：把move和 up加给docuemnt
    b). 会选中文字
        系统自带的
        阻止默认行为
        解决：return false;

        IE低版本出问题
        捕获(IE独有的)：

设置捕获
    obj.setCapture();

释放捕获：
    obj.releaseCapture();

克隆：
obj.cloneNode(); -> 浅克隆
返回新的物体

obj.cloneNode(true); -> 深度克隆 会将内容也复制
参数：默认是false -> 浅克隆

---

事件冲突：
同一个元素身上，添加了一个事件，但是希望执行不同的函数

添加事件的方式：
    a). 

事件绑定：解决事件冲突
一种全新的添加事件的方式

事件绑定：
obj.addEventListener(事件名，函数名，是否捕获);
事件名 -> 不能加上 "on"

兼容：高级浏览器
obj.attachEvent(事件名，函数名);
事件名 -> 加上 "on"
兼容： IE10-

兼容性：
    a). || 
    b). if  else

封装一个给物体添加绑定事件的函数：
obj -> 哪个物体
sEv -> 事件名
fn  -> 函数名
addEvent(obj,sEv,fn);

事件解绑定：
问题：
碰见匿名函数出问题了
原因：
函数每次都是new出来的，只要是new出来的东西都不相等

关于匿名函数：

obj.removeEventListener(事件名，函数名，是否捕获);
事件名 -> 不能加上‘on’
参数要与事件的绑定保持一致
兼容：高级浏览器

obj.detachEvent(事件名，函数名);
兼容：IE10-

兼容性：
    removeEvent(obj,sEv,fn);

事件冒泡：
子级 -> 父级
事件的捕获(下沉)：
父级 -> 子级
事件的捕获没用！！ 直接给false
obj.removeEventListener(事件名，函数名，false);

---

this出问题的地方：
a). 定时器里面的this
b). 函数包了一层
c). 事件绑定有问题(attachEvent)

九宫格拖拽：
4个边，4个角

右边：
var downX = oEvent.clientX;
var oldW = oBox.offsetWidth;
下边：
var downY = oEvent.clientY;
var oldH = oBox.offsetHeight;
左边：
var downX = oEvent.clientX;
var oldW = oBox.offsetWidth;
var oldL = oBox.offsetLeft;
上边：
var downY = oEvent.clientY;
var oldH = oBox.offsetHeight;
var oldT = oBox.offsetTop;

---

碰撞检测：：
a). 什么时候碰上
r1 > l2 && b1 > t2 && l1 < r2 && t1 < b2
b). 判断没碰上 √
r1 < l2 || b1 < t2 || l1 > r2 || t1 > b2