事件
2016-04-12 11:13:03 8 举报AI智能生成
javascript 事件
作者其他创作
大纲/内容
事件
事件机制
事件的优势
1:事件是异步的方式，所有事件可以有效的减低CPU的占用时间
2：事件的作用域是单一的
3：在编写交互的脚本时，更加贴近于需求
事件委托和事件绑定
1：事件委托
1：委托一般发生在根元素
2：依据的事件的特性，无论是什么方式，都会让事件冒泡到根元素
3：优点和缺点
2：事件绑定
优点和缺点
浏览器的事件
PC端
鼠标
onmousewheel
鼠标滑轮滚动触发的事件
onmousedown
鼠标点击下去的时候触发
禁止默认动作的话，那么就会同时把click禁止掉
onmouseup
鼠标松开鼠标的时候触发
onmouseout
鼠标离开元素的时候触发
如果鼠标没有离开元素的子元素，同样不触发
onmouseover
鼠标移到元素的时候触发
onclick
点击元素的时候触发
在移动端上会有一定时间额延迟主要原因是移动端会监听是否有dbclick
无论是左键右键都会触发的
ondbclick
双击元素的时候触发
onmousemove
鼠标在元素上移动的时候触发
oncontextmenu
鼠标右键弹出的时候触发的事件
通过return false，来禁止菜单弹出
键盘
onkeyup
键盘按键弹起触发的事件
onkeydown
键盘按键按下的时候触发的事件
这个时候获取当前输入框的值的时候并不会获取到刚按下按键输入的内容
onkeypress
键盘按下并且弹起以后触发的事件
UI事件
onscroll
页面滚动的时候触发的事件
在WAP上面，变现会有差异
onresize
窗口改变大小的时候触发
onselect
选中文字的时候触发
onerror
加载错误的时候触发
<img>调用的时候，如果图片是GIF的话会多次触发
onload
表单事件
和UI事件中的onselect一样，表单元素也有，
onchange
表单元素改变内容的时候触发
onreset
表单重置的时候触发
onsubmit
表单提交的时候触发
oninput
input元素属性值改变的时候触发
如果是IE 则使用onpropertychange
焦点事件
onblur
失去焦点的时候触发
onfocus
获取焦点的时候触发
MIDIA事件
onabort
oncanplay
onplay
操作事件
onpaste
复制的时候触发
这个事件在新型的浏览器上会有差异，注意兼容性
通过禁止默认动作的方式，可以禁止粘贴
oncut
剪切的时候触发
同样在兼容性上会有差异
HTML5新增加事件
CSS
animationstart
动画开始的时候触发，CSS3 -animation
animationiteration
动画循环的时候触发，CSS3 -animation
animationend
动画结束的时候触发，CSS3 -animation
transitionend
动画结束的时候触发，CSS3-transition
onpopstate
WAP端
触摸事件
ontouchstart
触摸开始的时候触发
ontouchmove
触摸的时候触发
ontouchend
触摸结束的时候触发，一般理解为手指移开屏幕
ontouchcancel
触摸取消的时候触发
底层事件
deviceorientation
水平感应触发的事件
devicemotion
加速陀螺仪触发的事件
事件涉及的方法
1：stoppropagation
2:preventdefault
3：addeventlistener
4:removeeventlistener
5:detachEvent
6:attachEvent
7：jquery
1:on
2:bind
3:off
4:on
5:trigger
6：once
node的事件对象
1:使用方法
2:事件对象具有的方法
1：on
绑定事件
2：addListener
3：removeListener
移除事件
4：removeAllListeners
移除所有事件
5：emit
触发事件
绑定事件，触发一次即移除事件
事件的使用
0 条评论
回复 删除
下一页
