共计 3149 个字符,预计需要花费 8 分钟才能阅读完成。
组件事件
组件的事件分为两种,一种是React自有的方法,一般都是一些常用的hook函数和方法,比如render函数,getInitalState函数等;另一种就是自定义方法。
一个简单的例子:
import React, { Component } from 'react';
import { render } from 'react-dom';
class LikeButton extends Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
handleClick(e) {
this.setState({ liked: !this.state.liked });
}
render() {
const text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick.bind(this)}>
You {text} this. Click to toggle.
</p>
);
}
}
render(
<LikeButton />,
document.getElementById('example')
);
可以看到 React 里面绑定事件的方式和在 HTML 中绑定事件类似,使用驼峰式命名指定要绑定的 onClick
属性为组件定义的一个方法 {this.handleClick.bind(this)}
。
这里补充一下bind的方法,bind给函数加上默认参数,作用是改变内部this的指向,第一个参数为指向外的对象,第二个起之后为新函数的参数。类似与bind的方法有apply,call
call()与apply()区别如下:
call方法:
语法:call(thisObj,Object)
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
apply方法:
语法:apply(thisObj,[argArray])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
详情请看深入浅出 妙用Javascript中apply、call、bind
事件的绑定
原生事件和合成事件
- 原生事件:通过
addEventListener
绑定的事件就是浏览器原生事件,使用原生事件的时候注意在componentWillUnmount
解除绑定removeEventListener
。 - 合成事件:“合成事件”会以事件委托(event delegation)的方式绑定到组件最上层,并且在组件卸载(unmount)的时候自动销毁绑定的事件。
注意:当e.stopPropagation()
来阻止事件冒泡到 document,行不通的时候,解决方法是要用e.nativeEvent.stopImmediatePropagation()
绑定事件的类型
1.表单
- onChange
- onSubmit
- onInput
2.触控事件(大多数情况下通过调用React.initializeTouchEvents(true)来手动启动)
- onTouchCancel
- onTouchEnd
- onTouchMove
- onTouchStart
3.键盘
- onKeyDown
- onKeyUp
- onKeyPress
4.剪切
- onCopy
- onCut
- onPaste
5.焦点
- onFocus(获取)
- onBlur(失去)
6.UI元素滚动
- onScroll
7.鼠标滚动
- onWheel
8.鼠标
- onClick
- onContextMenu
- onDoubleClick
- onMouseDown
- onMouseEnter
- onMouseLeave
- onMouseMove
- onMouseOut
- onMouseOver
- onMouseUp
9.拖动
- onDrop
- onDrag
- onDragEnd
- onDragEnter
- onDragExit
- onDragLeave
- onDragOver
- onDragStart
绑定事件对象(即事件的参数)
1.通用属性event
- bubble:boolean事件是否可以冒泡
- cancelable:boolean事件是否可以取消
- crentTarget:DomEventTarget
- defaultPrevented:boolean是否禁止默认行为
- eventPhose:number事件所处阶段
- isTrusted:boolean是否可信(用户输入)
- nativeEvent:DomEvent原声浏览器的方法
- preventDefault()阻止默认行为
- stopPropagation()阻止事件冒泡
- target:DomEventTarget
- timeStamp:number事件触发时间
- type:string
2.剪切事件
- clipboarData:DomDataTransfer表示剪切的值
3.键盘事件
- altkey:boolean是否按下ALT键
- charCode:number按键的编码
- ctrlkey:boolean是否按下CTRL键
- getModifierState(key):function是否按下辅助键(类似alt,ctrl)
- key:string按下的键
- keyCode:number按下键的编码
- locale:string本地字符串
- location:number
- metakey:boolean是否按下win键
- repeat:boolean是否重复
- shiftkey:boolean是否按下shift键
- which:number通用的charcode和keycode
4.焦点事件
- relatedTarget:DomDataTarget即两个输入框焦点交换时对象DOM
5.鼠标
- altkey:boolean是否按下ALT键
- ctrlkey:boolean是否按下CTRL键
- shiftkey:boolean是否按下shift键
- getModifierState(key):function是否按下辅助键(类似alt,ctrl)
- metakey:boolean是否按下win键
- relatedTarget:DomDataTarget即两个输入框焦点交换时对象DOM
- button
- buttons
- clientX(当前鼠标的坐标,相对于浏览器左上角)
- clientY
- pageX(当前鼠标的坐标,相对于HTML页面左上角)
- pageY
- screenX(当前鼠标的坐标,相对于显示器左上角)
- screenY
6.触摸
- altkey:boolean是否按下ALT键
- ctrlkey:boolean是否按下CTRL键
- shiftkey:boolean是否按下shift键
- getModifierState(key):function是否按下辅助键(类似alt,ctrl)
- metakey:boolean是否按下win键
- changeTouches:DOMTouchlist涉及当前事件的手指的一个列表
- targetTouches:DOMTouchlist位于当前DOM元素上的手指的一个列表。
- touches:DOMTouchlist当前位于屏幕上的所有手指的一个列表。
7.UI元素
- detail:number 滚动距离
- view:界面
8.滚动
- deltMode:number单位
- deltaX:nmber
- deltaY:nmber
- deltaZ:nmber