

首页  思维导图  详情



事件

2016-04-12 11:13:03   8  举报





AI智能生成

javascript 事件

javascript

event

前端开发

模版推荐

作者其他创作

大纲/内容

事件机制

事件的优势

1:事件是异步的方式，所有事件可以有效的减低CPU的占用时间

2：事件的作用域是单一的

3：在编写交互的脚本时，更加贴近于需求

事件委托和事件绑定

1：事件委托

1：委托一般发生在根元素

2：依据的事件的特性，无论是什么方式，都会让事件冒泡到根元素

3：优点和缺点

2：事件绑定

优点和缺点

浏览器的事件

PC端

鼠标

onmousewheel

鼠标滑轮滚动触发的事件

其中原生事件参数带一个e.wheelDelta,当为正数的时候是向上滚动，负数的时候是向下滚动

FF3.5以下不支持，要改用DOMMouseScroll,其中e.detail和e.wheelDelta一样，但是取值相反

onmousedown

鼠标点击下去的时候触发

禁止默认动作的话，那么就会同时把click禁止掉

onmouseup

鼠标松开鼠标的时候触发

onmouseout

鼠标离开元素的时候触发

如果鼠标没有离开元素的子元素，同样不触发

onmouseover

鼠标移到元素的时候触发

onclick

点击元素的时候触发

在移动端上会有一定时间额延迟主要原因是移动端会监听是否有dbclick

无论是左键右键都会触发的

ondbclick

双击元素的时候触发

onmousemove

鼠标在元素上移动的时候触发

oncontextmenu

鼠标右键弹出的时候触发的事件

通过return false，来禁止菜单弹出

键盘

onkeyup

键盘按键弹起触发的事件

onkeydown

键盘按键按下的时候触发的事件

这个时候获取当前输入框的值的时候并不会获取到刚按下按键输入的内容

onkeypress

键盘按下并且弹起以后触发的事件

UI事件

onscroll

页面滚动的时候触发的事件

在WAP上面，变现会有差异

后退的时候，页面会滚动到上一页记录的scrollTop,这个时候会触发一次滚动，一般绑定onscroll，我会使用异步的方式去调用

onresize

窗口改变大小的时候触发

onselect

选中文字的时候触发

onerror

加载错误的时候触发

目前只有body,img,vadio等少量需要加载的DOM元素会带有这个事件

<img>调用的时候，如果图片是GIF的话会多次触发

onload

加载完成的时候触发,大多特性和onerror一样

表单事件

onselect

和UI事件中的onselect一样，表单元素也有，

onchange

表单元素改变内容的时候触发

onreset

表单重置的时候触发

onsubmit

表单提交的时候触发

如果return false,则取消表单

oninput

input元素属性值改变的时候触发

如果是IE 则使用onpropertychange

焦点事件

onblur

失去焦点的时候触发

onfocus

获取焦点的时候触发

MIDIA事件

onabort

onerror

oncanplay

onplay

onload

操作事件

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

触发事件

6：once

绑定事件，触发一次即移除事件

事件的使用

 Collect

Get Started

不良事件上报流程

 Collect

Get Started

事件服务器

 Collect

Get Started

事件登记

 Collect

Get Started

ViewGroup事件分发





0 条评论

下一页