事件对象：存储了(描述了)事件更加详细的信息
坐标信息（位置）：
横坐标(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)
比例：变化的数/定死的数
键盘事件：
<b>onkeydown 当按下键盘的时候</b>
键位对应的键码：
oEvent.keyCode -> 键码
对应一个数字
规律
常用的键：
删除键：8
回车键：13
左键：37
上键：38
右键：39
下键：40
组合键：
*** 在js里面键码不能组合使用
ctrl:
ctrlKey
shift:
shiftKey
alt:
altKey
<b>oncontextmenu 当点击右键时候</b>
默认行为：
右键有菜单 表单能提交 文本框能输入内容 点击a链接能跳转...
阻止默认行为：
return false;
阻止复制内容途径：
a). ctrl + c
b). 右键
<b>eg 拖拽：</b>
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). <input type="button" onclick="xxx"
b). oBtn.onclick = xxxx;
事件绑定：解决事件冲突
一种全新的添加事件的方式
事件绑定：
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
网友评论