Javascript 检测用户界面单击操作/事件处理程序

我试图找到不同的方法，使用这些方法我们可以在Knockoutjs中插入click操作，并放置任何用于插入的代码。我主要希望为单击操作处理程序提供所需的时间

我试过什么？

我已经尝试使用绑定处理程序上可用的预处理函数钩住绑定。我可以通过为特定绑定句柄提供绑定预处理器，来连接Knockout解释数据绑定属性的逻辑

因此，我修改了函数引用以添加拦截代码。显然，在函数调用之前和之后添加代码。下面的代码显示了该概念的工作版本

ko.bindingHandlers.click.preprocess=函数（值、名称、addBindingCallback）{
if（value.indexOf（“函数”）>-1）{
modifiedvalue=value.replace（“函数”、“函数”\uuuu占位符函数”）；
//需要返回返回值，以便正确执行事件气泡/捕获
modifiedvalue=modifiedvalue+“var returnValue=_占位符匿名函数。应用（$data，arguments）；”；
}否则{
//需要返回返回值，以便正确执行事件气泡/捕获
modifiedvalue=“var returnValue=“+value+”。应用（$data，arguments）；”；
}
var returnvalue=“函数（$data，$event）{”+
“开始（）；”+
修正值+
“截取端（）；”+
“返回值；”+
" }";
返回值；
}
var startTime；
var结束时间；
函数InterceptStart（）{
startTime=performance.now（）；
控制台日志（“启动”）；
}
函数截取端（）{
endTime=performance.now（）；
console.log（“end.Total time explored=“+（endTime-startTime））；
}
var ViewModel=函数（）{
var self=这个；
self.clickHandler=函数（）{
log（“在点击处理程序中”）；
};
回归自我；
};
应用绑定（新的ViewModel（））

拦截我
对于这种用例，是否有其他推荐的方法

我推荐的方法是使用浏览器的开发工具。。。它们为您提供了您想要的：在脚本（事件处理程序）、布局和绘制上花费的时间

例如：（记录在a上）


黄色部分显示脚本编写时间。请注意
运行微任务
，它来自
延迟的更新（我认为您当前的代码不能解释这些…）

紫色部分是您的布局和样式更新
绿色部分是绘制更新的UI的地方

感谢您的回复，我知道开发人员工具的用途不是调试，而是需要将数据发送到分析解决方案。