2. 程式人生 > >React Event 事件系統

React Event 事件系統

阿新 • • 發佈：2018-12-11

React事件

React 標準化了事件物件，因此在不同的瀏覽器中都會有相同的屬性。

元件createClass後建立的是許多方法組成的物件。元件中使用的方法分為React自有的方法與使用者定義的方法。其中React自有方法是元件生命週期中的方法，如：render、componentWillUpdate、componentDidMount等。使用者自定義的方法可以起符合JS命名規範的方法就可以（最好使用駝峰命名），如：handleClick、handleChange、handleMouseover等。

事件繫結語法：onClick = {this.handleClick}

事件繫結函式

滑鼠類

  • onClick

  • onContextMenu

  • onDoubleClick

  • onMouseDown

  • onMouseEnter

  • onMouseLeave

  • onMouseMove

  • onMouseOut

  • onMouseOver

  • onMouseUp

拖拽事件：

  • onDrop

  • onDrag

  • onDragEnd

  • onDragEnter

  • onDragExit

  • onDragLeave

  • onDragOver

  • onDragStart

觸控

  • onTouchCancel

  • onTouchEnd

  • onTouchMove

  • onTouchStart

觸控只會在移動裝置上產生

鍵盤

onKeyPress是onKeyDown和onKeyUp的組合

  • onKeyDown

  • onKeyPress

  • onKeyUp

剪下類

  • onCopy

  • onCut

  • onPaste

對應的是我們常常使用的複製、剪下和貼上

表單類

onChange

  • onInput

  • onSubmit

onChange可以用在輸入框、單選框、下拉列表裡，每當內容發生變化時我們都能獲得通知。onInput

使用在文字輸入。onSubmit是用在整個表單的輸入提交，常用在禁止表單的預設操作。

焦點事件

  • onFocus

  • onBlur

UI元素類

  • onScroll

滾動事件觸發的時候會觸發onScroll事件

滾動

  • onWheel

滑鼠滾輪觸發的事件，監聽滾動幅度，滾動方位

組成事件

  • onCompositionEnd

  • onCompositionStart

  • onCompositionUpdate

圖片類

  • onLoad

  • onError

多媒體類

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting

例項演示

let HelloDada = React.creatClass({
    getInitialState:function(){
        return{
            name:''
        };
    },
    handleChange:function(e){
        this.setState({
            name:e.target.value
        });
    },
    render:function(){
        return (
        <div>
          <input onChange={this.handleChange} />
        </div>
       );
    }
});
ReactDom.render(<HelloDada/>,document.body);

事件池

虛擬事件物件已經被合併。這意味著虛擬事件物件將被重新使用，而該事件回撥被呼叫之後所有的屬性將無效。這是出於效能的考慮。因此，您不能以非同步的方式訪問事件。

function onClick(event) {
  console.log(event); // =>無效的物件
  console.log(event.type); // => "click"
  var eventType = event.type; // => "click"
​
  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);
​
  this.setState({clickEvent: event}); // 不起作用.this.state.clickEvent 將只包含空值.
  this.setState({eventType: event.type}); // 您依然可以匯出事件屬性
}

如果您想以一個非同步的方式來訪問事件屬性，您應該對事件呼叫event.persist()。這將從事件池中取出合成的事件，並允許該事件的引用，使使用者的程式碼被保留。

事件物件

事件處理器將會傳入SyntheticEvent的例項，一個對瀏覽器本地事件的跨瀏覽器封裝。它有和瀏覽器本地事件相同的屬性和方法，包括stopPropagation()和preventDefault()，但是沒有瀏覽器相容問題。如果因為一些因素，需要底層的瀏覽器事件物件，只要使用nativeEvent屬性就可以獲取到它了。

對於 v0.14，在事件處理函式中返回 false 將不會阻止事件冒泡。取而代之的是在合適的應用場景下，手動呼叫e.stopPropagation()或者e.preventDefault()。

    handleChange:function(e){
        console.log(e.target.value);
    }

其中e是事件物件target是事件物件的屬性

(以下內容括號內為型別)

通用屬性

  • 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) 事件的型別

不同事件物件的特有屬性

剪下事件

  • clipboardData(DOMDataTransfer)表示拿到的資料

鍵盤事件

  • altKey(boolean) 表示是否按下alt鍵

  • charCode(Number) 表示的是按鍵的字元編碼，可以通過編碼來判斷按下的是什麼鍵

  • ctrlKey(boolean) 表示是否按下ctrl鍵

  • getModifierState(key) (function) 表示是否按下輔助按鍵（輔助按鍵就是雷士ctrl、shift等輔助按鍵）可以傳入按鍵編碼來判斷是否按下

  • key(string) 字串，按下的鍵

  • keyCode(Number) 表示那些不是字元編碼的按鍵

  • locale(String) 表示本地化得一些字串

  • location(number) 表示位置

  • metaKey(boolean) 表示的是win系統下的win鍵，mac系統下對應的command鍵

  • repeat(boolean) 表示按鍵是否重複

  • shiftKey(boolean) 表示是否按下shift

  • which(Number) 表示經過通用化得charCode和keyCode

焦點事件

  • relatedTarget(DOMEventTarget) 相關焦點物件

滑鼠事件

  • altKey(boolean)

  • button(Number)

  • buttons(Number)

  • clientX(Number) 原點為瀏覽器左上角

  • clinetY(Number) 原點為瀏覽器左上角

  • ctrlKey(boolean)

  • getModifierState(key) (function)

  • metaKey(boolean)

  • pageX(Number) 原點為HTML頁面的左上角

  • pageY(Number) 原點為HTML頁面的左上角

  • relatedTarget(DOMEventTarget)

  • screenX(Number) 原點為顯示器的左上角

  • screenY(Number) 原點為顯示器的左上角

  • shiftKey(boolean)

觸控事件

為了使觸控事件生效，在渲染所有元件之前呼叫 React.initializeTouchEvents(true)。

  • altKey(boolean)

  • ctrlKey(boolean)

  • getModifierState(key)

  • metaKey(boolean)

  • shiftKey(boolean)

  • changedTouches(DOMTouchList) 判斷手勢操作

  • targetTouches(DOMTouchList) 判斷手勢操作

  • touches(DOMTouchList) 判斷手勢操作

UI元素事件

  • detail(Number) 滾動的距離

  • view(DOMAbstractView) 介面，視窗

滑鼠滾動

  • deltaMode(Number) 可以理解為移動的單位

  • deltaX(Number) X軸移動的相對距離固定值

  • deltaY(Number) Y軸移動的相對距離固定值

  • deltaZ(Number) Z軸移動的相對距離固定值

例項

  1. 滾動事件物件

var HelloDada = React.creatClass({
    getInitialState:function(){
        return {
            backgroundColor:'#FFFFFF'
        }
    },
    handleWheel:function(e){
        var newColor = (parseInt(this.state.backgroundColor.substr(1),16)+e.deltaY*997).tiString(16);
        this.setState({
            backgroundColor:newColor
        })
    },
    render:function(){
        return <div onWheel={this.handleWheel} style={this.state}>
        <p>Dada Shuaige</p>
        </div>
    }
});
ReactDOM.render(<HelloDada />,document.body)

2.鍵盤事件物件

let Dada =React.creatClass{
    getInitialState:function(){
        return{
            password:''
        }
    },
    handleKeyPress:function(e){
        this.setState({
            paddword:this.state.password+e.which
        });
    },
    handleChange:function(e){
        e.target.value='';
    },
    render:function(){
        return <div>
        <input onKeyPress={this.handleKeyPress} onChange={this.handleChange} />
        <p style={{
            'display':this.state.password.indexOf('1') >=0?'block':'none'
        }}>Dada handsomeboy</p>
        </div>
    }
};
ReactDOM.render(<Dada />,document.body)

事件與狀態關聯

狀態不僅僅實現了元件內部結果的清晰對應，還實現了元件與使用者之間的互動，使使用者與元件的行為緊緊結合起來

handleChange:function(e){
    this.setState({Dada:e.target.value});
}

this.setState設定狀態

例項

let Dada =React.creatClass({
    getInitialState:function(){
        return{
            x:0,
            y:0
        }
    },
    handleMouseMove:function(e){
        this.setState({
            x:e.clientX,
            y:e.clientY
        });
    },
    render:function(){
        return <div onMouseMove={this.handleMouseMove} style={{
            width:'200px',
            height:'200px',
            backgroundColor:'#999'
        }}>
        {this.state.x+'.'+this.state.y}
        </div>
    }
});
ReactDOM.render(<Dada />,document.body)

React原文說明

SyntheticEvent

This reference guide documents the SyntheticEvent wrapper that forms part of React’s Event System. See the Handling Events guide to learn more.

Overview

Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

If you find that you need the underlying browser event for some reason, simply use the nativeEvent attribute to get it. Every SyntheticEvent object has the following attributes:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

Note:

As of v0.14, returning false from an event handler will no longer stop event propagation. Instead, e.stopPropagation() or e.preventDefault() should be triggered manually, as appropriate.

Event Pooling

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"
​
  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);
​
  // Won't work. this.state.clickEvent will only contain null values.
  this.setState({clickEvent: event});
​
  // You can still export event properties.
  this.setState({eventType: event.type});
}

Note:

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

Supported Events

React normalizes events so that they have consistent properties across different browsers.

The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append Capture to the event name; for example, instead of using onClick, you would use onClickCapture to handle the click event in the capture phase.

Reference

Clipboard Events

Event names:

onCopy onCut onPaste

Properties:

DOMDataTransfer clipboardData

Composition Events

Event names:

onCompositionEnd onCompositionStart onCompositionUpdate

Properties:

string data

Keyboard Events

Event names:

onKeyDown onKeyPress onKeyUp

Properties:

boolean altKey
number charCode
boolean ctrlKey
boolean getModifierState(key)
string key
number keyCode
string locale
number location
boolean metaKey
boolean repeat
boolean shiftKey
number which

The key property can take any of the values documented in the DOM Level 3 Events spec.

Focus Events

Event names:

onFocus onBlur

These focus events work on all elements in the React DOM, not just form elements.

Properties:

DOMEventTarget relatedTarget

Form Events

Event names:

onChange onInput onInvalid onSubmit

For more information about the onChange event, see Forms.

Mouse Events

Event names:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

The onMouseEnter and onMouseLeave events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.

Properties:

boolean altKey
number button
number buttons
number clientX
number clientY
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
number pageX
number pageY
DOMEventTarget relatedTarget
number screenX
number screenY
boolean shiftKey

Pointer Events

Event names:

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

The onPointerEnter and onPointerLeave events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.

Properties:

As defined in the W3 spec, pointer events extend Mouse Events with the following properties:

number pointerId
number width
number height
number pressure
number tangentialPressure
number tiltX
number tiltY
number twist
string pointerType
boolean isPrimary

A note on cross-browser support:

Pointer events are not yet supported in every browser (at the time of writing this article, supported browsers include: Chrome, Firefox, Edge, and Internet Explorer). React deliberately does not polyfill support for other browsers because a standard-conform polyfill would significantly increase the bundle size of react-dom.

If your application requires pointer events, we recommend adding a third party pointer event polyfill.

Selection Events

Event names:

onSelect

Touch Events

Event names:

onTouchCancel onTouchEnd onTouchMove onTouchStart

Properties:

boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

UI Events

Event names:

onScroll

Properties:

number detail
DOMAbstractView view

Wheel Events

Event names:

onWheel

Properties:

number deltaMode
number deltaX
number deltaY
number deltaZ

Media Events

Event names:

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
onTimeUpdate onVolumeChange onWaiting

Image Events

Event names:

onLoad onError

Animation Events

Event names:

onAnimationStart onAnimationEnd onAnimationIteration

Properties:

string animationName
string pseudoElement
float elapsedTime

Transition Events

Event names:

onTransitionEnd

Properties:

string propertyName
string pseudoElement
float elapsedTime

Other Events

Event names:

onToggle

相關推薦

React Event 事件系統

React事件 React 標準化了事件物件，因此在不同的瀏覽器中都會有相同的屬性。 元件createClass後建立的是許多方法組成的物件。元件中使用的方法分為React自有的方法與使用者定義的方法。其中React自有方法是元件生命週期中的方法，如：render、c

React原始碼分析7 — React合成事件系統

1 React合成事件特點 React自己實現了一套高效的事件註冊，儲存，分發和重用邏輯，在DOM事件體系基礎上做了很大改進，減少了記憶體消耗，簡化了事件邏輯，並最大化的解決了IE等瀏覽器的不相容問題。與DOM事件體系相比，它有如下特點 React元件上宣

React事件系統入門

保存 組件 綁定 pos 通過 機制 兼容 target 我們 React基於虛擬DOM實現了一個合成事件層，我們所定義的事件處理器會接受到一個合成事件層對象的實例，它完全符合W3C標準，不會存在任何IE標準的兼容性問題。並且和原生的瀏覽器事件一樣擁有同樣的接口，同樣支持事

React原始碼分析之事件系統

React原始碼分析之事件系統(轉載自阿里雲) react自己實現了一套高效的事件系統，包括了事件的註冊、儲存、分發、和重用，在DOM事件體系基礎上做了很大改進，減少了記憶體消耗，簡化了事件邏輯，並最大化的解決了IE等瀏覽器的事件不相容問題。與傳統的DOM體系相比，它有如下特點：

Android 4 0 事件輸入 Event Input 系統

                 1. TouchScreen功能在Android4.0下不工作       原來在Android2.3.5下能正常工作的TouchScreen功能，移植到Android 4.0就不能正常工作了。憑直覺，Android4.0肯定有鬼。真是不看不知道，一看嚇一跳。在Android

python-Event事件線程同步和互斥

sse logs pan else 控制 事件 utf-8 event Coding 1 #!/usr/bin/python 2 #coding=utf-8 3 #用於線程間通信，通過事件標識控制 4 import threading 5 from time

跨平臺的EVENT事件 windows linux（轉）

-1 hand lock break type nal lin pthread.h blog #ifndef _HIK_EVENT_H_ #define _HIK_EVENT_H_ #ifdef _MSC_VER #include <Window

Event 事件 - 基礎

lis 事件綁定 class tro 觸發 rip javascrip style 事件類型 事件驅動三要素 事件源：即觸發事件的元素 事件：被JavaScript檢測到的行為。例如： 　　　鼠標點擊 　　　鍵盤按鍵 　　　選輸入框 事件處理函數：事件發生時要進行的操作，又

React 滾動事件

true delta subst 事件 rip utf and uil blog 代碼： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"&g

第53天：鼠標事件、event事件對象

鼠標右鍵 pin mov offsetx 參數 cursor wid 坐標 logs -->鼠標事件-->event事件對象-->默認事件-->鍵盤事件（keyCode）-->拖拽效果 一、鼠標事件 onclick --------------

javascript event事件兼容性處理

cli clientx click script document java 事件 () 坐標 ie 6-8支持event事件,ff瀏覽器不支持 獲取鼠標點擊位置的坐標 document.onclick = function(){ alert(event.cl

event事件的preventDefault()

spa table 事件 fault 默認 code blog ble prevent 1.preventDefault()取消事件的默認動作 2.有時候一個頁面有table選項卡，點擊一個選項卡切換內容，這時候切換沒問題，但是點擊本身的時候地址錯誤，這時候就要調用prev

spring boot: 一般註入說明(五) @Component, application event事件為Bean與Bean之間通信提供了支持

listen source 監聽 監聽器 nbsp lis 所有 fin 配置 spring的事件，為Bean與Bean之間通信提供了支持，當一個Bean處理完成之後，希望另一個Bean知道後做相應的事情，這時我們就讓另外一個Bean監聽當前Bean所發送的事件。 spri

event——事件對象詳解

bubuko 方法 相對 需要 family 分享 null chrome 它的 PS：轉自https://www.cnblogs.com/songyaqi/p/5204143.html 1. 事件對象 Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀

python全棧開發基礎【第二十五篇】死鎖，遞歸鎖，信號量，Event事件，線程Queue

random 問題 定時器 初始 .get rand true () 進入 一、死鎖現象與遞歸鎖 進程也是有死鎖的 所謂死鎖： 是指兩個或兩個以上的進程或線程在執行過程中，因爭奪資源而造成的一種互相等待的現象，若無外力作用， 它們都將無法推進下去。此時稱系統處於死鎖狀態或系

並發編程 - 線程 - 1.互斥鎖/2.GIL解釋器鎖/3.死鎖與遞歸鎖/4.信號量/5.Event事件/6.定時器

級別 src 總結 alex post strip CQ bsp 回收機制 1.互斥鎖： 原理：將並行變成串行 精髓：局部串行，只針對共享數據修改 保護不同的數據就應該用不用的鎖 1 from threading import Thread

Event事件

w3c標準 code pagex 提示 兼容 event對象 sem itl con Event對象（事件源對象）代表事件的狀態 　　比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。 btn.onmousedown = function(eve

並發編程---死鎖||遞歸鎖---信號量---Event事件---定時器

遞歸 spa sleep 事件 lang tin lap 計數器 name 死鎖 互斥鎖：Lock()，互斥鎖只能acquire一次 遞歸鎖: RLock()，可以連續acquire多次，每acquire一次計數器+1，只有計數為0時，才能被搶到acquire # 死

saltstack之salt event事件用法

OS CP values exists medium highlight -a character jid 　　event是一個本地的ZeroMQ PUB Interface，event是一個開放的系統，用於發送信息通知salt或其他的操作系統。每個event都有一個標簽。

React後臺管理系統-file-uploader組件

soa field spa type parseint nds efault 刪除 component 1.React文件上傳組件github地址: https://github.com/SoAanyip/React-FileUpload 2.Util裏邊新建file-up