1.原生JS
事件觸發調用有三種方式：
1. on[event]事件屬性，手動觸發 ❗️on[event]事件是Window對象上的方法。
2. on[event]事件屬性，通過htmlElement.click()模擬觸發
3. addEventListener監聽事件，手動觸發
this指向
- 如果onevent事件屬性定義的時候將this作為參數，在函數中獲取到該參數是DOM對象。用該方法可以獲取當前DOM。
- 在方法中直接訪問this, this指向當前函數所在的作用域。或者說調用函數的對象。
<body> <input type="checkbox" id="root" onmouseover="toclick(this,event)" onclick="add()" /> <button onclick="a.test(this)">Test</button> <script> function toclick(argThis,e) { console.log(e); // event對象；必須手動傳參 console.log(argThis); // 傳遞過來的this指向DOM元素，可以通過這個方法調用自身 const rootEle = argThis; // 等於document.getElementById('root'); rootEle.click(); // 里面沒有參數，只是觸發 } function add(arg) { console.log(arg);// undefined 說明事件想要獲取event等參數必須要傳參 console.log(this); // window 不管是mouseover里面通過rootEle觸發還是直接單擊觸發，相當於直接運行add() } const a = { test(argThis) { console.log(argThis); // dom元素 console.log(this); // this指向對象a } } const rootEle = document.getElementById("root"); rootEle.addEventListener('click', function() { console.log('listen===',this); // DOM元素；指向調用監聽器的對象 }) </script> </body>
2. ReactJS
事件觸發調用方式：
1. 事件屬性。on[Event]觸發，注意ReactJS中使用小駝峰命名，這點和原生JS不同。
2. click()模擬觸發。注意模擬觸發和事件監聽都要求DOM加載完畢。
3. 監聽事件觸發。addEventListener
this指向：
React中this指向一般都期望指向當前組件，如果不綁定this，this一般等於undefined。
綁定this的方法有三種：
- 箭頭函數；本質上是在構造函數中進行了綁定；
- 在事件屬性定義的時候使用.bind(this, ...params)（不推薦，因為每次運行，會生成一個新函數）
- 在構造函數中手動綁定，只需要綁定一次。
3. 事件對象
原生js中事件對象是原生事件對象，它存在瀏覽器兼容性，需要用戶自己處理各瀏覽器兼容問題。
ReactJS中的事件對象是React將原生事件對象(event)進行了跨瀏覽器包裝過的合成事件(SyntheticEvent)。
合成事件對象的特點：
1）在事件處理函數中，可以正常訪問事件屬性。
2）為了性能考慮，執行完后，合成事件的事件屬性將不能再訪問。
異步處理函數中，訪問不到合成事件的屬性。
因為執行異步函數的時候，事件處理函數的上下文消失。
示例：
handleClick = (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); // 不起作用，this.state.clickEvent 的值將會只包含 null this.setState({clickEvent: event}); // 你仍然可以導出事件屬性 this.setState({eventType: event.type}); }
想要在異步函數中繼續使event屬性可訪問，需要使用event.persist();
handleClick = (event) => { event.persist(); console.log(event); // => nullified object console.log(event.type); // => "click" const eventType = event.type; // => "click" setTimeout(function() {// 異步函數中復用 console.log(event.type); // => "click" console.log(eventType); // => "click" }, 0); this.setState({clickEvent: event}); this.setState({eventType: event.type}); }