各种on...事件
| 事件列表 | |||
|---|---|---|---|
| 事件 | 浏览器支持 | 解说 | |
| 一般事件 | onclick | IE3、N2 | 鼠标点击时触发此事件 |
| ondblclick | IE4、N4 | 鼠标双击时触发此事件 | |
| onmousedown | IE4、N4 | 按下鼠标时触发此事件 | |
| onmouseup | IE4、N4 | 鼠标按下后松开鼠标时触发此事件 | |
| onmouseover | IE3、N2 | 当鼠标移动到某对象范围的上方时触发此事件 | |
| onmousemove | IE4、N4 | 鼠标移动时触发此事件 | |
| onmouseout | IE4、N3 | 当鼠标离开某对象范围时触发此事件 | |
| onkeypress | IE4、N4 | 当键盘上的某个键被按下并且释放时触发此事件. | |
| onkeydown | IE4、N4 | 当键盘上某个按键被按下时触发此事件 | |
| onkeyup | IE4、N4 | 当键盘上某个按键被按放开时触发此事件 | |
| 页面相关事件 | onabort | IE4、N3 | 图片在下载时被用户中断 |
| onbeforeunload | IE4、N | 当前页面的内容将要被改变时触发此事件 | |
| onerror | IE4、N3 | 出现错误时触发此事件 | |
| onload | IE3、N2 | 页面内容完成时触发此事件 | |
| onmove | IE、N4 | 浏览器的窗口被移动时触发此事件 | |
| onresize | IE4、N4 | 当浏览器的窗口大小被改变时触发此事件 | |
| onscroll | IE4、N | 浏览器的滚动条位置发生变化时触发此事件 | |
| onstop | IE5、N | 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断 | |
| onunload | IE3、N2 | 当前页面将被改变时触发此事件 | |
| 表单相关事件 | onblur | IE3、N2 | 当前元素失去焦点时触发此事件 |
| onchange | IE3、N2 | 当前元素失去焦点并且元素的内容发生改变而触发此事件 | |
| onfocus | IE3 、N2 | 当某个元素获得焦点时触发此事件 | |
| onreset | IE4 、N3 | 当表单中RESET的属性被激发时触发此事件 | |
| onsubmit | IE3 、N2 | 一个表单被递交时触发此事件 | |
| 滚动字幕事件 | onbounce | IE4、N | 在Marquee内的内容移动至Marquee显示范围之外时触发此事件 |
| onfinish | IE4、N | 当Marquee元素完成需要显示的内容后触发此事件 | |
| onstart | IE4、 N | 当Marquee元素开始显示内容时触发此事件 | |
| 编辑事件 | onbeforecopy | IE5、N | 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件 |
| onbeforecut | IE5、 N | 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件 | |
| onbeforeeditfocus | IE5、N | 当前元素将要进入编辑状态 | |
| onbeforepaste | IE5、 N | 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件 | |
| onbeforeupdate | IE5、 N | 当浏览者粘贴系统剪贴板中的内容时通知目标对象 | |
| oncontextmenu | IE5、N | 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 | |
| oncopy | IE5、N | 当页面当前的被选择内容被复制后触发此事件 | |
| oncut | IE5、N | 当页面当前的被选择内容被剪切时触发此事件 | |
| ondrag | IE5、N | 当某个对象被拖动时触发此事件 [活动事件] | |
| ondragdrop | IE、N4 | 一个外部对象被鼠标拖进当前窗口或者帧 | |
| ondragend | IE5、N | 当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了 | |
| ondragenter | IE5、N | 当对象被鼠标拖动的对象进入其容器范围内时触发此事件 | |
| ondragleave | IE5、N | 当对象被鼠标拖动的对象离开其容器范围内时触发此事件 | |
| ondragover | IE5、N | 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 | |
| ondragstart | IE4、N | 当某对象将被拖动时触发此事件 | |
| ondrop | IE5、N | 在一个拖动过程中，释放鼠标键时触发此事件 | |
| onlosecapture | IE5、N | 当元素失去鼠标移动所形成的选择焦点时触发此事件 | |
| onpaste | IE5、N | 当内容被粘贴时触发此事件 | |
| onselect | IE4、N | 当文本内容被选择时的事件 | |
| onselectstart | IE4、N | 当文本内容选择将开始发生时触发的事件 | |
| 数据绑定 | onafterupdate | IE4、N | 当数据完成由数据源到对象的传送时触发此事件 |
| oncellchange | IE5、N | 当数据来源发生变化时 | |
| ondataavailable | IE4、N | 当数据接收完成时触发事件 | |
| ondatasetchanged | IE4、N | 数据在数据源发生变化时触发的事件 | |
| ondatasetcomplete | IE4、N | 当来子数据源的全部有效数据读取完毕时触发此事件 | |
| onerrorupdate | IE4、N | 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件 | |
| onrowenter | IE5、N | 当前数据源的数据发生变化并且有新的有效数据时触发的事件 | |
| onrowexit | IE5、N | 当前数据源的数据将要发生变化时触发的事件 | |
| onrowsdelete | IE5、N | 当前数据记录将被删除时触发此事件 | |
| onrowsinserted | IE5、N | 当前数据源将要插入新数据记录时触发此事件 | |
| 外部事件 | onafterprint | IE5、N | 当文档被打印后触发此事件 |
| onbeforeprint | IE5、N | 当文档即将打印时触发此事件 | |
| onfilterchange | IE4、N | 当某个对象的滤镜效果发生变化时触发的事件 | |
| onhelp | IE4、N | 当浏览者按下F1或者浏览器的帮助选择时触发此事件 | |
| onpropertychange | IE5、N | 当对象的属性之一发生变化时触发此事件 | |
| onreadystatechange | IE4、N | 当对象的初始化属性值发生变化时触发此事件 |
event 对象属性
转自网络
事件处理器将会传入SyntheticEvent的实例，一个对浏览器本地事件的跨浏览器封装。它有和浏览器本地事件有相同的属性和方法，包括stopPropagation()和preventDefault()，但是没有浏览器兼容问题。
如果因为一些因素，需要底层的浏览器事件对象，只要使用nativeEvent属性就可以获取到它了。
对于 v0.14，在事件处理函数中返回
false将不会阻止事件冒泡。取而代之的是在合适的应用场景下，手动调用e.stopPropagation()或者e.preventDefault()。
handleChange:function(e){
console.log(e.target.value);
}
其中target是 事件对象e 是事件对象的属性
3.1 通用属性
- bubbles (boolean) 表示事件是否冒泡
- cancelable(boolean) 表示事件是否可以取消
- currentTarget(DOMEventTarget) 与Target类似，由于事件可以冒泡，所以两者表示的内容是不同的
- defaultPrevented(boolean) 表示事件是否禁止了默认行为
- eventPhase(number) 表示事件所处的阶段
- isTrusted(boolean) 表示事件是否可信。所谓的可信事件表示的是用户操作的事件，不可信事件就是通过JS代码来触发的事件。
- nativeEvent(DOMEvent)
- preventDefault() (void) 对应的defaultPrevented，表示的是禁止默认行为
- stopPropagaTion() (void) 对应的是bubbles，表示的是sh
- target(DOMEventTarget)
- timeStamp(number) 时间戳，也就是事件触发的事件
- type(string) 事件的类型
3.2 不同事件对象的特有属性
3.2.1 剪切事件
- clipboardData(DOMDataTransfer)表示拿到的数据
3.2.2 键盘事件
- ctrlKey(boolean) 表示是否按下ctrl键
- altKey(boolean) 表示是否按下alt键
- shiftKey(boolean) 表示是否按下shift
- metaKey(boolean) 表示的是win系统下的win键，mac系统下对应的command键
- getModifierState(key) (function) 表示是否按下辅助按键（辅助按键就是雷士ctrl、shift等辅助按键）可以传入按键编码来判断是否按下
- charCode(Number) 表示的是按键的字符编码，可以通过编码来判断按下的是什么键
- key(string) 字符串，按下的键
- keyCode(Number) 表示那些不是字符编码的按键
- which(Number) 表示经过通用化得charCode和keyCode
- locale(String) 表示本地化得一些字符串
- location(number) 表示位置
- repeat(boolean) 表示按键是否重复
3.2.3 焦点事件
- relatedTarget(DOMEventTarget) 相关焦点对象
3.2.4 鼠标事件
- ctrlKey(boolean)
- altKey(boolean)
- shiftKey(boolean)
- metaKey(boolean)
- getModifierState(key) (function)
- button(Number)
- buttons(Number)
- clientX(Number) 原点为浏览器左上角
- clinetY(Number) 原点为浏览器左上角
- pageX(Number) 原点为HTML页面的左上角
- pageY(Number) 原点为HTML页面的左上角
- screenX(Number) 原点为显示器的左上角
- screenY(Number) 原点为显示器的左上角
- relatedTarget(DOMEventTarget)
3.2.5 触摸事件
为了使触摸事件生效，在渲染所有组件之前调用 React.initializeTouchEvents(true)。
- ctrlKey(boolean)
- altKey(boolean)
- shiftKey(boolean)
- metaKey(boolean)
- getModifierState(key)
- changedTouches(DOMTouchList) 判断手势操作
- targetTouches(DOMTouchList) 判断手势操作
- touches(DOMTouchList) 判断手势操作
3.2.6 UI元素事件
- detail(Number) 滚动的距离
- view(DOMAbstractView) 界面，视窗
3.2.7 鼠标滚动
- deltaMode(Number) 可以理解为移动的单位
- deltaX(Number) X轴移动的相对距离固定值
- deltaY(Number) Y轴移动的相对距离固定值
- deltaZ(Number) Z轴移动的相对距离固定值
