UI事件的全局事件处理程序

Question

我正在尝试将Clickstream API与React应用集成。我希望能够设置全局事件处理程序来发送点击流数据。例如，为React中渲染的所有按钮创建事件处理程序以调用trackButtonClick(name)。替代方法是将该调用添加到每个单独的onClick回调方法中。

Answer 1

我认为您可以创建一个对象，以监听Window之类的高级组件上的所有点击事件。这些事件包含有关触发它们的元素的重要信息，以及可能有用的其他属性。然后，您可以流式传输数据。

如果您打开 Chrome开发者工具，然后在console中编写window.addEventListener("click", (event) => {console.log(event)})，则每次单击该窗口后，您都应该能够看到所有事件。

Answer 2

我对React并不熟悉，但是在香草JS中可以这样完成：

window.addEventListener('click', event => {
    if (event.target && event.target.nodeName === 'BUTTON') {
        // Process clicks..
    }
}