用来获取事件的详细信息:鼠标位置、键盘按键
例子:获取鼠标位置:clientX
document的本质:document.childNodes[0].tagName
获取event对象(兼容性写法)
function(ev){
var oEvent=ev||event;}
事件流
事件冒泡
取消冒泡:oEvent.cancelBubble=true
例子:仿select控件
DOM事件流
鼠标位置
可视区位置:clientX、clientY
例子1:跟随鼠标的Div
<style>#m{width:200px;height:200px;background:red;position:absolute}</style>
<body style="height:2000px">
<div id="m"></div>
</body>
<script>
document.οnmοusemοve=function(ev){
var oEvent = ev||event;
var oDiv = document.getElementById('m');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
oDiv.style.left = oEvent.clientX+'px';
oDiv.style.top = oEvent.clientY+scrollTop+'px';
}
</script>
消除滚动条的影响
滚动条的意义——可视区与页面顶部的距离
document.documentElement.scrollTop || document.body.scrollTop;
获取鼠标在页面的绝对位置
封装函数
例子2:一串跟随鼠标的Div
<script>
function getPos(ev){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return {x:ev.clientX+scrollLeft+'px',y:ev.clientY+scrollTop+'px'}
}
document.οnmοusemοve=function(ev){
var oEvent = ev||event;
var aDiv = document.getElementsByTagName('div');
var gp = getPos(oEvent);
for(var i=aDiv.length-1;i>0; i--){
aDiv[i].style.left = aDiv[i-1].offsetLeft+'px'
aDiv[i].style.top = aDiv[i-1].offsetTop+'px'
}
aDiv[0].style.left = gp.x;
aDiv[0].style.top = gp.y;
}
</script>
keyCode
获取用户按下键盘的哪个按键
例子:键盘控制Div移动
其他属性
ctrlKey、shiftKey、altKey
例子:提交留言
回车 提交
ctrl+回车 提交
默认行为
什么是默认行为
阻止默认行为
普通写法:return false;
例子1. 屏蔽右键菜单
弹出自定义右键菜单
例子2. 只能输入数字的输入框
keydown、keyup事件的区别
简易拖拽
拖拽原理
距离不变
三个事件
靠谱拖拽
原有拖拽的问题
直接给document加事件
FF下,空Div拖拽Bug
阻止默认事件
防止拖出页面
修正位置
attachEvent(事件名称, 函数),绑定事件处理函数
detachEvent(事件名称, 函数),解除绑定
DOM方式
addEventListener(事件名称,函数, 捕获)
removeEventListener(事件名称, 函数, 捕获)
何时使用事件绑定
绑定事件和this
绑定匿名函数,会无法删除
复习拖拽原理
距离不变
三个事件:down、move、up
封装成函数
限制范围
对位置进行判断
例子1:不能拖出窗口的Div
例子2:不能拖出指定对象的Div
磁性吸附
图片拖拽
阻止默认事件
文字选中
阻止默认事件
IE下拖动有问题
事件捕获
碰撞检测
碰撞检测原理——九宫格
例子:拖拽中的碰撞检测
与DOM配合
带框的拖拽
保留原有位置的拖拽