React事件摘錄

2021-09-16 21:08:29 字數 1067 閱讀 2284

jsx 中以內聯(inline)的方式

+
合成事件 syntheticevent

react 實現了乙個「合成事件」層(synthetic event system),這個事件模型保證了和 w3c 標準保持一致,所以不用擔心有什麼詭異的用法,並且這個事件層消除了 ie 與 w3c 標準實現之間的相容問題。

「合成事件」還提供了額外的好處:

事件委託

「合成事件」會以事件委託(event delegation)的方式繫結到元件最上層,並且在元件解除安裝(unmount)的時候自動銷毀繫結的事件。

什麼是「原生事件」?

比如你在 componentdidmount 方法裡面通過 addeventlistener 繫結的事件就是瀏覽器原生事件。

使用原生事件的時候注意在 componentwillunmount 解除繫結 removeeventlistener。

所有通過 jsx 這種方式繫結的事件都是繫結到「合成事件」,除非你有特別的理由,建議總是用 react 的方式處理事件。

如果混用「合成事件」和「原生事件」,比如一種常見的場景是用原生事件在 document 上繫結,然後在元件裡面繫結的合成事件想要通過 e.stoppropagation() 來阻止事件冒泡到 document,這時候是行不通的,參見 event delegation,因為 e.stoppropagation 是內部「合成事件」 層面的,解決方法是要用 e.nativeevent.stopimmediatepropagation()

」合成事件「 的 event 物件只在當前 event loop 有效,比如你想在事件裡面呼叫乙個 promise,在 resolve 之後去拿 event 物件會拿不到(並且沒有錯誤丟擲):

handleclick(e)
引數傳遞

給事件處理函式傳遞額外引數的方式:bind(this, arg1, arg2, ...)

render: function() ,

handleclick: function(param, event)

winform 事件(摘錄HQXY)

事件引數 object sender 事件主體 eventargs e 事件資料 函式體 我進行的操作 常用事件 點選事件click 1 load事件 該事件在窗體載入到記憶體時發生,即在第一次顯示窗體前發生。2 activated事件 該事件在窗體啟用時發生。3 deactivate事件 該事件在...

react 事件處理

1.所有的事件以駝峰式命名如onclick 2.this作用域的問題,直接使用箭頭函式可以將該類的例項物件傳遞過去 若是呼叫的元件方法,需要使用this.handleclick this.handleclick.band this 這句話會建立乙個新的函式給handleclick,並把this當做引...

react事件處理

採用on 事件名的方式來繫結乙個事件,注意,這裡和原生的事件是有區別的,原生的事件全是小寫onclick,react裡的事件是駝峰onclick,react的事件並不是原生事件,而是合成事件。和普通瀏覽器一樣,事件handler會被自動傳入乙個event物件,這個物件和普通的瀏覽器event物件所包...