JavaScript 事件应用

什么是event对象
用来获取事件的详细信息:鼠标位置(clientX、clientX为可视区座标)、键盘按键
例子:获取鼠标位置:event.clientX(鼠标横坐标)、event.clientY(鼠标纵坐标)
document的本质:document.childNodes[0].tagName(document的第一个子节点为DOCTYPE)

获取event对象(兼容性写法)
var oEvent=ev||event;

事件流
事件冒泡 事件沿着父级网上传
取消冒泡:oEvent.cancelBubble=true
例子:仿select控件

See the Pen cancelBubble by Adele (@qianduank) on CodePen.


DOM事件流

鼠标位置
可视区位置:clientX、clientY
例子1:一串跟随鼠标的Div

See the Pen getPos by Adele (@qianduank) on CodePen.


消除滚动条的影响
滚动条的意义——可视区与页面顶部的距离

keyCode (onkeydown、onkeyup)
获取用户按下键盘的哪个按键,键盘每个键对应一个keyCode数字

其他属性
ctrlKey、shiftKey、altKey
例子:ctrl+回车 提交

See the Pen onkeydown by Adele (@qianduank) on CodePen.

默认行为
什么是默认行为:浏览器自身所带的行为
oncontexmenu 右键菜单行为
阻止默认行为
普通写法:return false;
例子1. 屏蔽右键菜单
弹出自定义右键菜单

See the Pen oncontextmenu by Adele (@qianduank) on CodePen.


例子2. 只能输入数字的输入框
keydown、keyup事件的区别

See the Pen onkeydown by Adele (@qianduank) on CodePen.

简易拖拽
拖拽原理
距离不变
三个事件 onmousedown onmousemove onmouseup

靠谱拖拽
原有拖拽的问题:直接给document加事件
FF下,空Div拖拽Bug,需阻止默认事件
防止拖出页面 if语句
例子:不能拖出窗口的Div

See the Pen onmousemove by Adele (@qianduank) on CodePen.


限制范围
对位置进行判断
例子:不能拖出指定对象的Div
磁性吸附

See the Pen tuozhuai by Adele (@qianduank) on CodePen.


图片拖拽
阻止默认事件 return false
文字选中
阻止默认事件 return false
IE下拖动有问题
事件捕获 setCapture() 解决ie下拖动问题
释放捕获 releaseCapture()
与DOM配合
带框的拖拽
保留原有位置的拖拽

控制其他对象
例子:控制文字滚动

See the Pen scoll by Adele (@qianduank) on CodePen.

事件绑定
IE方式
attachEvent(事件名称, 函数),绑定事件处理函数
例子:attachEvent(“onclick”, function(){} )
detachEvent(事件名称, 函数),解除绑定
DOM方式(ie7下不兼容)
addEventListener(事件名称,函数, 捕获)
例子:addEventListener(“click”,function(){}, false)
removeEventListener(事件名称, 函数, 捕获)
*ie9之下绑定事件顺序会反着来
何时使用事件绑定
绑定事件和this
绑定匿名函数,会无法删除

See the Pen AddEvent by Adele (@qianduank) on CodePen.

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注