将数据传递给 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());
});​