React(6)-组件事件处理

共计 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()区别如下：

详情请看深入浅出 妙用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