javascript - 将数据传递给 jQuery 事件处理程序

Question

设想

在 GUI 中，用户在文本输入中插入一些文本，然后单击按钮：插入的文本将显示在 div 中。

我找到了一个简单的解决方案（此处为演示），即在访问输入元素对象的处理程序中设置输出文本。糟透了。相反，我会将输入文本（而不是元素）传递给处理程序。

问题

如何将参数（在这种情况下为输入消息文本）传递给处理函数？

Answer 1

我修改了您的 jsFiddle中的代码。在 jQuery 中，您可以将数据作为参数传递并使用event.data jQuery 引用来访问它。

Answer 2

/*
 * I would not to referer UI elements here
 * Rather I would pass the $('#txtMessage').val() to the handler
 */

那是不可能的。

如果要使用该输入元素的当前值，则必须访问 UI 元素本身。

如果您的意图是将事件处理程序与知道要访问哪个特定元素分离，则可以通过使用事件数据将其传递给处理程序来轻松完成，例如：

$(sel).on('click', {
   source: document.getElementById('txtMessage')
}, handler);

在回调中：

function handler(event) {
    var txt = event.data.source.value;
    ...
}

请注意，jQuery 事件数据应该是key: value如上所示的对映射。如接受的答案所示，直接传入 jQuery 对象很容易中断。

Answer 3

检查这个 - http://api.jquery.com/event.data/

您的 JS 将是这样的（未经测试）：

$('#myButton').on("click", {val: $('#txtMessage').val()}, function(event){
    $('#divOutput').html(event.data.val);
});​

Answer 4

这将为您提供输入元素的当前值。它基本上仍然访问输入元素，但如果您希望获取当前值，则无法避免

$('#myButton').on("click", {val: function (){ return $('#txtMessage').val()}}, function(event){
    $('#divOutput').html(event.data.val());
});​