关于前端:React如何绑定捕获方式事件

52次阅读

共计 492 个字符，预计需要花费 2 分钟才能阅读完成。

相熟 React 的都晓得，比方 onClick 绑定的事件是在冒泡阶段执行的，如何监听捕捉阶段的事件呢？

答案：onClickCapture，只须要在事件绑定相熟会加上 Capture 后缀，React会在捕捉阶段调用事件回调执行

举个🌰

import React, {Component} from "react";

class App extends Component {handleClick = (type) => {console.log(`${type}- 触发 `);
  };
  render() {
    return (
      <div
        onClick={() => this.handleClick("div- 冒泡")}
        onClickCapture={() => this.handleClick("div- 捕捉")}
      >
        <button
          onClick={() => this.handleClick("btn- 冒泡")}
          onClickCapture={() => this.handleClick("btn- 捕捉")}
        >
          点我
        </button>
      </div>
    );
  }
}
export default App;

下图执行程序

对于 DOM 事件流不相熟能够看这篇文章 DOM 事件流

正文完