React学习笔记（5）--事件

1.事件处理函数的使用

组件：

• React 自有方法
• 用户定义方法

事件处理函数可以接受event参数；

如之前用过的：

        //监听内容的变化并且记录在状态中
        handleChange: function(event){
            this.setState({inputText: event.target.value});
        },
        //添加提交按钮并打印结果
        handleSubmit: function () {
            console.log("reply To" + this.props.selectName + "\n"
                     + "\n" + this.state.inputText);
        },

编写完事件后需要绑定事件处理函数

如：

onChange={this.handleChange}

onChange={this.handleChange}
 
  
 
  

    事件； 
  
 
  

    1》触摸类事件：只会在移动设备中产生，对手的移动位置进行检测并做出响应 
  
 
  
 
   
onTouchCancel:
 
   
onTouchEnd
 
   
onTouchMove
 
   
onTouchStart
 
  
 
  
2》键盘类事件：
 
  
 
   
onKeyDown
 
   
onKeyUp
 
   
onKeyPress
 
  
 
  

    3》剪切类事件 
  
 
  
 
   
onCopy
 
   
onCut
 
   
onPaste
 
  
 
  

    4》 表单类事件 
  
 
  
 
   
onChange
 
   
onInput
 
   
onSubmit
 
  
 
  

    5》 焦点类事件 
  
 
  
 
   
onFocus ： 获得焦点
 
   
onBlur ： 失去焦点
 
  
 
  

    6》UI元素： 元素或页面的滚动事件 
  
 
  
 
   
onScroll
 
  
 
  

    7》滚动事件：监听滚动位置，方向 
  
 
  
 
   
onWheel
 
  
 
  

    8》鼠标类事件： 
  
 
  
 
   
onClick
 
   
onContextMenu ：右键，上下文菜单
 
   
onDoubleClickc
 
   
onMouseEnter
 
   
onMouseDown
 
   
onMouseLeave
 
   
onMouseMove
 
   
onMouseOut
 
   
onMouseOver
 
   
onMouseUp
 
  
 
  

    9》鼠标拖拽事件： 上传内容 
  
 
  
 
   
onDrop 
 
   
onDrag
 
   
onDragEnd
 
   
onDragEnter
 
   
onDragExit
 
   
onDragLeave
 
   
onDragOver
 
   
onDragStart
 
  
 
  

    实例1： 
  
 
  
 
   



    
    
    
    


    

 
   
 
  
 
  
 
   
 
  
 
  
 
   
 
  
 
  
 
   
 
  
 
  

    2 事件对象： 
  
 
  
 
   
event.target.value
 
  
 
  
 
   
 
  
 
  

    target：事件对象的属性， 事件应得DOM元素 
  
 
  
 
   
 
  
 
  

    事件对象的属性： 
  
 
  

    1》通用属性 
  
 
  
 
   
boolean  bubbles : 事件是否可以冒泡
 
   
boolean cancelable : 事件是否可以取消
 
   
DOMEventTarget currentTarget : 
 
   
boolean defaultPrevented : 事件是否禁止默认行为
 
   
number eventPhase : 事件所处的阶段
 
   
boolean isTrusted : 事件是否可信，可信事件即用户自定义触发的事件，不可信事件即用js代码触发的事件
 
   
DOMEvent nativeEvent  使用原生的浏览器发出的事件对象
 
   
void preventDefault() : 禁止默认行为
 
   
void stopPropagation() ： 禁止冒泡
 
   
DOMEventTarget target:
 
   
number timeStamp
 
   
string type
 
  
 
  

    2》不同事件对象特有的属性 
  
 
  
 
   
 
  
 
  

    i  剪切事件： 
  
 
  
 
   
DOMDataTransfer clipboardDate : 得到剪切数据
 
  
 
  

    ii 键盘事件： 
  
 
  
 
   
boolean altKey ; 是否按下alt键
 
   
Number charCode ；按键的编码; 字符编码
 
   
boolean ctrlKey ；是否按下ctrl键
 
   
function getModifierState(key) ; 是否按下辅助按键ctrl,shift
 
   
String key
 
   
Number keyCode; 按键编码；非字符
 
   
String locale ; 本地化的字符串
 
   
Number location ；位置
 
   
boolean metaKey; win键
 
   
boolean repeat ；按键是否重复
 
   
boolean shiftKey； 是否按下shift
 
   
Number which ; 通用化的charCode和keyCode
 
  
 
  

    iii 焦点 
  
 
  
 
   
DOMEventTarget relatedTarget :  相关的角度
 
  
 
  

    iv 鼠标事件 
  
 
  
 
   
boolean altKey；
 
   
Number button；
 
   
Number buttons；
 
   
Number clientX;
 
   
Number clientY; 当前鼠标所处的坐标, 顶点是浏览器窗口的左上角
 
   
boolean ctrlKey
 
   
function getModifierState(key);
 
   
boolean metaKey;
 
   
Number pageX
 
   
Number pageY; 顶点时html页面的左上角
 
   
DOMEventTarget relatedTarget ;
 
   
Number screenX；
 
   
Number scrrenY; p 
 
   
boolean shiftKey;
 
  
 
  
 
   
 
  
 
  
 
   
 
  
 
  

    v 触摸事件： 
  
 
  
 
   
boolean altKey
 
   
DOMTouchList changedTouchs
 
   
boolean ctrlKey
 
   
function getModifierState(Key)
 
   
boolean metaKey
 
   
boolean shiftKey
 
   
DOMTouchList targetTouches
 
   
DOMTouchList touches
 
  
 
  
 
   
 
  
 
  

    vi UI元素 
  
 
  
 
   
Number detail ： 滚动的距离
 
   
DOMAbstractView view ： 视图
 
  
 
  
vii 滚动：
 
  
 
   
Number deltaMode: 单位
 
   
Number deltaX
 
   
Number deltaY
 
   
Number deltaZ 在坐标轴上对应的位置
 
  
 
  

    实例1 
  
 
  



    
    
    
    


    

 
  
 
  
 
  

    实例2 
  
 
  
 
   



    
    
    
    


    

 
   
 
   
 
  
 
  
 
   
 
  
 
  

    3  事件和状态关联 
  
 
  

    this.setState() 
  
 
  
 
   
 
  
 
  

    实例1： 
  
 
  
 
   



    
    
    
    


    

 
   
 
   
 
  
 
  
 
   
 
  
 
  
 
   
 
  
 
  
 
   
 
  
 
  
 
   
 
  
 
  
 
   
 
  
 
  

    视频课程： 极客学院