js事件
来源：互联网 发布：linux安装vncviewer 编辑：程序博客网 时间：2024/05/17 05:19
用来获取事件的详细信息：鼠标位置、键盘按键
例子：获取鼠标位置：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.onmousemove=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.onmousemove=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配合
带框的拖拽
保留原有位置的拖拽
- JS 事件
- js事件
- JS事件
- js事件
- js事件
- js事件
- js事件
- js 事件
- JS事件
- JS 事件
- JS事件
- JS 事件
- js事件
- JS事件
- js事件
- JS 事件
- JS事件
- JS--事件
- 基于360虚拟防火墙实现neutron三层网络功能
- [Git报道.3]创建本地版本库（msysGit)
- css布局小技巧
- 这家初创公司足以叫板谷歌无人驾驶技术，创始人是个真女神
- 预告：如何用大数据做威胁情报 | 硬创公开课
- js事件
- VMware CentOS 7 NAT方式连接网络配置
- 计算机网络相关名词
- Hbase原理、基本概念、基本架构
- javascript的BOM对象简介，BOM消息框，javascript循环定时器，一次性定时器，javascript的location对象
- Java注解
- angular总结1
- 坚果智能影院与百视通达成战略合作：体育年布局体育内容
- 为了更好的自拍 OPPO真是够拼了
