如何为所有输入字段添加额外的 Javascript 事件处理程序以记录点击+编辑

How to add an extra Javascript Event Handler for all Input Fields to Log Clicks+Edits?

本文关键字:程序 事件处理 Javascript 记录 编辑 输入 添加 字段      更新时间:2023-09-26

我试图解决的问题是我有一个包含许多输入字段的页面(其中一些是动态生成的(,我希望能够在用户单击各种输入控件并修改数据然后离开控件时进行一些日志记录。 我认为这可以通过捕获onFocus和onBlur的事件来完成,适用于所有类型的输入字段(按钮,下拉列表,文本框等(。 我希望记录他们输入元素的事实以及他们离开元素时的值。但是,我有两个限制:

  1. 某些输入具有自己的事件处理程序。 我不想破坏这些,但想独立于它们触发事件。 由于目标是发送日志消息,因此实际上不需要我的其他事件处理程序与现有事件处理程序进行交互。

  2. 我需要有一个选择器,允许我捕获用户触发事件时当前存在的所有输入控件(无论可能有多少(。 这可以在事件触发的同时完成,也可以在修改 DOM 以创建/删除元素时触发更新。

我想这是一个(有点(常见的情况,它似乎在主要框架中有一些处理(Backbone 和 Prototype 似乎都提供了一些更好的事件处理模式(,但我试图避免向 Web 应用程序添加另一个框架。 不过,该项目已经有一个jQuery依赖项,我认为这应该可以通过选择器来实现。

有谁知道一个好的模式可以优雅地支持这种行为?

你能通过jQuery绑定到模糊事件吗,比如:

 $(document.body).on('blur', 'input', function (event) {
      $.ajax({ url: "/log/", data: {value: event.currentTarget.value} })
 })