当为每个按钮附加不同的 onClick() 时，加上点击事件监听器，我是否需要检查事件目标是否是我的函数？

Question

我有很多按钮，每个按钮都有一个 onClick 函数。 onClick 是否负责处理 eventListener 并将事件自动分配给正确的函数，或者我是否需要测试该事件是否适用于我的函数？

如果我也为点击事件添加了 eventListeners 怎么办？在这些事件侦听器中，我检查事件目标是否用于正确的函数。但是 React 也会将点击传递给 onClick() 函数吗？ React 如何区分 onClick() 处理程序和 addEventListener("click") 处理程序？

例如，在我的 class 组件中我有：

export class MyPage extends React.Component {
constructor(props) {
    super(props);
...
}

componentDidMount() {
  this.attachEventHandlers();
...
}

attachEventHandlers() {
window.addEventListener("click",this.ontoggleExpandUpper.bind(this));
window.addEventListener("click",this.ontoggleExpandLower.bind(this));
...
}

ontoggleExpandUpper(){
    if (!(event.target.classList.contains('uexp'))) return;
...
}

ontoggleExpandLower(){
    if (!(event.target.classList.contains('lexp'))) return;
...
}

toggleSidebar() {
    this.setStateOnMount((state) => ({
      ...state, sidebarOpen: !state.sidebarOpen
    }));
  }

render() {
 
//first a couple with onClick()

 <button className="open-sidebar btn btn-dark btn-lg shadow" onClick {() => this.toggleSidebar()}>
 <i className="open-sidebar"></i>
</button>

<button className="toggle-sidebar-closed btn btn-dark" onClick={() => this.toggleSidebar()}>
<i className="fi flaticon-cancel"></i>
</button>

//next a couple with addEventListener()
<button id="uexp" className="uexp">
              <i id="iuexp" className="uexp"></i>
              </button>
<button id="lexp" className="lexp">
              <i id="ilexp" className="lexp"></i>
              </button>
}

}

Answer 1

在您的示例中，您要向 window 对象添加一个事件侦听器，这意味着无论您单击哪个 DOM 元素，每次点击都会触发它。通常，您只想将侦听器添加到您真正感兴趣的元素，例如document.querySelector('.uexp').addEventListener('click', event => this.onToggleExpandUpper(event))。这样，您就不必检查事件目标是否正确，因为 onToggleExpandUpper() 只有在您单击正确的元素时才会被调用。

React 将为您注册事件侦听器。当您设置 onClick 时，它将自动添加到正确的元素中。您应该更喜欢 onClick 属性而不是手动添加事件侦听器，因为它更具声明性。

当为每个按钮附加不同的 onClick() 时，加上点击事件监听器，我是否需要检查事件目标是否是我的函数？

When attaching a different onClick() for each button, plus have eventListeners for click, do I need to check that the event target is my function?

javascript

onclick

addeventlistener

reactjs