React(6)-组件事件处理

组件事件

组件的事件分为两种,一种是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