react自身實(shí)現(xiàn)了一套自己的事件機(jī)制，包括事件注冊(cè)、事件的合成、事件冒泡、事件派發(fā)等，雖然和原生的是兩碼事，但也是基于瀏覽器的事件機(jī)制下完成的。

react 的所有事件并沒(méi)有綁定到具體的dom節(jié)點(diǎn)上而是綁定在了document 上，然后由統(tǒng)一的事件處理程序來(lái)處理，同時(shí)也是基于瀏覽器的事件機(jī)制（冒泡），所有節(jié)點(diǎn)的事件都會(huì)在 document 上觸發(fā)。

React事件與原生事件的執(zhí)行順序又是如何？

代碼示例

import React from 'react';
class App extends React。Component {constructor(props) {super(props);this.parentRef = React.createRef();this.childRef  = React.createRef();}componentDidMount() {console.log('react componentDidMount');this.parentRef.current?.addEventListener('click', () => {console.log('父元素：原生事件 父元素 DOM 事件監(jiān)聽(tīng)');});this.childRef.current?.addEventListener('click', () => {console.log('子元素：原生事件 子元素 DOM 事件監(jiān)聽(tīng)');});document.addEnvetListener('click', e => {console.log('document：原生document DOM 事件監(jiān)聽(tīng)');});}parentClickFun = () => {console.log('React：父元素事件監(jiān)聽(tīng)'); };childClickFun = () => {console.log('React：子元素事件監(jiān)聽(tīng)'); }render() {return (<div ref={this.parentRef} onClick={this.parentClickFun}><div ref={this.childRef} onClick={this.childClickFun}>事件執(zhí)行</div></div>);}
}

輸出：

子元素：原生事件 子元素 DOM 事件監(jiān)聽(tīng)

父元素：原生事件 父元素 DOM 事件監(jiān)聽(tīng)

React：子元素事件監(jiān)聽(tīng)

React：父元素事件監(jiān)聽(tīng)

document：原生document DOM 事件監(jiān)聽(tīng)

?事件執(zhí)行順序：

1、先執(zhí)行 子元素的DOM事件

2、執(zhí)行 父元素的DOM事件

3、執(zhí)行 React? 子元素的事件

4、執(zhí)行 React 父元素的事件

5、 最后執(zhí)行 document上的DOM事件的監(jiān)聽(tīng)

由上總結(jié)：

1、React 中所有事件都掛載在document對(duì)象上

2、先觸發(fā)真是DOM事件，再觸發(fā)React事件

3、最后執(zhí)行document 上掛載的事件

如何阻止冒泡行為？

1、阻止合成事件的冒泡， e.stopPropagation();

2、阻止合成事件與最外層document 上的事件的冒泡：e.nativeEvent.stop

3、阻止合成事件與原生事件的冒泡：

document.body.addEventListener('click', e => {if (e.target && e.target.matches('div.code')) {return;}this.setState({active: false});
});

總結(jié)

React 最終會(huì)綁定在document這個(gè)DOM上

React有一套自己的合成事件機(jī)制