6、事件 · 前端躬行記

&emsp;&emsp;React在原生事件的基礎上，重新設計了一套跨瀏覽器的合成事件（SyntheticEvent），在事件傳播、注冊方式、事件對象等多個方面都做了特別的處理。 ## 一、注冊事件 &emsp;&emsp;合成事件采用聲明式的注冊方式，類似于設置HTML屬性，但有兩點不同： &emsp;&emsp;（1）事件要采用小駝峰的命名法，而不是全部小寫，例如onclick要寫成onClick。 &emsp;&emsp;（2）在JSX中的事件處理程序是一個函數引用，而不是一段字符串，如下代碼所示，其中handle()是一個函數。 ~~~html <button onclick="handle()">提交</button> <button onClick={handle}>提交</button> ~~~ &emsp;&emsp;兩個元素都注冊了點擊事件，其中前者采用了傳統的事件注冊，后者使用了合成事件，通過對比可發現它們之間有兩處明顯的不同。 &emsp;&emsp;React的事件類型是原生事件類型的一個子集，在上面的示例中，為按鈕添加了Mouse類型的onClick事件。除了常規的Focus、Form、Touch等類型之外，React還支持Selection、Wheel、Media等有特殊功能的事件類型。 ## 二、事件傳播 &emsp;&emsp;React中的事件最終都會轉換成原生事件，但不會注冊到某個真實的DOM元素，而是綁定到根元素，使用事件委托技術進行事件代理，再由一個總的事件監聽器管理所有的事件處理程序。 &emsp;&emsp;React中的事件傳播只有冒泡這一種形式，而冒泡會先在DOM樹中向上傳播，一直到根元素，然后再從JSX中觸發的React元素開始向它的父元素傳播，依次執行綁定的事件處理程序。在下面的示例中，分別為頁面中的根元素和\<body>元素，以及組件中的\<div>元素和\<button>元素綁定了點擊事件，其中\<div>是\<button>的父元素。 ~~~js document.documentElement.addEventListener("click", function(e) { console.log("html"); }); document.body.addEventListener("click", function(e) { console.log("body"); }); class Btn extends React.Component { handle1(e) { console.log("子元素"); } handle2(e) { console.log("父元素"); } render() { return ( <div onClick={this.handle2}> <button onClick={this.handle1}>提交</button> </div> ); } } ~~~ &emsp;&emsp;當點擊提交按鈕時，在控制臺輸出的順序是“body”、“html”、“子元素”、“父元素”。在React的合成事件中，也會包含一個事件對象（例如handle1()函數中的e參數）。如果要停止冒泡傳播，那么可以在相應的事件處理程序中調用e.stopPropagation()。 ## 三、事件對象 &emsp;&emsp;React基于W3C規范對事件對象進行了一層封裝，不僅保證了瀏覽器的兼容性，還提供了一個訪問原生事件對象的入口（即調用自身的nativeEvent屬性）。注意，在合成事件中阻止元素的默認行為，不能用返回false的方式，得調用事件對象的preventDefault()方法。 &emsp;&emsp;合成事件是被池化的，在執行完事件處理程序后，其參數（即事件對象）的屬性將會被丟棄，例如通過定時器異步調用事件對象的type屬性，如下所示。 ~~~js class Btn extends React.Component { handle(e) { console.log(e.type); //"click" setTimeout(function() { console.log(e.type); //null }, 0); } render() { return <button onClick={this.handle}>提交</button>; } } ~~~ &emsp;&emsp;點擊提交按鈕，在控制臺首先會輸出“click”，然后再輸出null。如果想要保持事件對象的屬性，那么可以調用它的persist()方法。繼續上一個例子，只要在handle()方法中加一句e.persist()，如下代碼所示，就能在定時器中輸出“click”。 ~~~js handle(e) { console.log(e.type); //"click" setTimeout(function() { console.log(e.type); //"click" }, 0); e.persist(); } ~~~ ## 四、this &emsp;&emsp;事件處理程序中的this不會自動綁定，即默認是沒有指向的。在下面的例子中，點擊提交按鈕，會先觸發注冊的handle()方法，然后在方法內輸出的this的值是undefined。 ~~~js class Btn extends React.Component { handle() { console.log(this); //undefined } render() { return <button onClick={this.handle}>提交</button>; } } ~~~ &emsp;&emsp;有兩種方式可以解決this指向的問題，分別是箭頭函數和bind()方法。 **1）箭頭函數** &emsp;&emsp;將事件處理程序改成箭頭函數的形式，就能糾正this的指向，如下代碼所示。 ~~~js class Btn extends React.Component { handle() { console.log(this); //Btn實例 } render() { return <button onClick={() => this.handle()}>提交</button>; } } ~~~ &emsp;&emsp;箭頭函數是不包含this的，在其內部使用的this是從上一層的作用域中繼承而來的，其指向的是函數聲明時所在的對象，即當前組件的實例，注意，像上面的\<button>元素那樣，直接在其屬性中使用箭頭函數，會讓組件在每次渲染時，創建一個不同的回調函數。 &emsp;&emsp;可以換一種寫法，避免每次新建函數，如下代碼所示，將箭頭函數轉移到方法聲明的時候。 ~~~js class Btn extends React.Component { handle = () => { console.log(this); //Btn實例 } render() { return <button onClick={this.handle}>提交</button>; } } ~~~ **2）bind()** &emsp;&emsp;為事件處理程序調用bind()方法，同樣也能糾正this的指向，如下代碼所示。 ~~~js class Btn extends React.Component { handle() { console.log(this); //Btn實例 } render() { return <button onClick={this.handle.bind(this)}>提交</button>; } } ~~~ &emsp;&emsp;函數的bind()方法能創建一個綁定指定對象的函數，在上面的render()方法中，傳遞給bind()方法的this，其指向的正是當前組件的實例。除了在元素的屬性中調用bind()方法之外，還可以將其移到組件的構造函數中，如下所示。 ~~~js class Btn extends React.Component { constructor(props) { super(props); this.handle = this.handle.bind(this); } handle() { console.log(this); //Btn實例 } render() { return <button onClick={this.handle}>提交</button>; } } ~~~ ## 五、事件處理程序的參數 &emsp;&emsp;事件處理程序默認會接收一個事件對象，如果要向其傳遞額外的參數，那么可以通過兩種方式實現。 &emsp;&emsp;第一種是用箭頭函數，如下代碼所示，顯式地將所有參數傳遞給事件處理程序。 ~~~js class Btn extends React.Component { handle(e, name) { console.log(e, name); } render() { return <button onClick={(e) => this.handle(e, "strick")}>提交</button>; } } ~~~ &emsp;&emsp;第二種是用bind()方法，如下代碼所示，事件對象會被隱式的傳遞過去，并且必須位于事件處理程序參數列表的最后。 ~~~js class Btn extends React.Component { handle(name, e) { console.log(name, e); } render() { return <button onClick={this.handle.bind(this, "strick")}>bind</button>; } } ~~~ ***** > 原文出處： [博客園-React躬行記](https://www.cnblogs.com/strick/category/1455720.html) [知乎專欄-React躬行記](https://zhuanlan.zhihu.com/pwreact) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。 ![](https://box.kancloud.cn/2e1f8ecf9512ecdd2fcaae8250e7d48a_430x430.jpg =200x200) 推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。