在jQuery的.on(）数据对象中访问$(this）

Getting access to $(this) in jQuery's .on() data object?

本文关键字：访问 this 对象 数据 on jQuery      更新时间：2023-09-26

我正在使用 .on（） 在我的 DOM 中添加一些侦听器 - 一个输入范围字段，以及一些带有 .colorBlock 类的块。这些事件侦听器只需要间歇性地处于活动状态，我想在不使用它们时关闭它们 .off（）。这样做意味着使用命名函数而不是匿名函数。

很公平，除了我需要将数据传递到回调函数中。我知道我可以使用第二个（第三个？）参数字段将对象传递给事件，这在回调中是可读的，但这样做似乎是将其范围限定为事件，而不是侦听 .on（） 的 DOM 节点。例如，请参阅下文：

$('#brushSize').on('touchend', { size: $(this).val() }, utils.setBrushSize);
$('.colorBlock').on('touchstart', { color: $(this).data('color') }, utils.setColor);

在我的回调函数中，我为 e.data.color 和 e.data.size 添加了警报，并且都调用了 undefined。

更糟糕的是，这是一个电话间隙应用程序，所以我在跟踪传递内容方面的选择受到限制，所以我假设的一些内容可能对正在发生的事情是错误的。

有什么建议吗？

谢谢。

让我们分解这一行：

$('#brushSize').on('touchend', { size: $(this).val() }, utils.setBrushSize);

它与以下内容完全相同（变量除外）：

var sizeValue = $(this).val();
$('#brushSize').on('touchend', { size: sizeValue }, utils.setBrushSize);

例如，您正在调用$(this).val()，然后将调用它的结果作为数据对象的一部分传递。因此，除非this已经是你想要从中获取值的东西，否则它是行不通的。

如果要在事件发生时从元素中获取一些信息，只需将该代码放在事件处理程序中即可。例如，查看此行：

$('.colorBlock').on('touchstart', { color: $(this).data('color') }, utils.setColor);

在我看来，您正在尝试从触摸的.colorBlock元素中获取颜色。㞖：

$('.colorBlock').on('touchstart', function() {
    utils.setColor($(this).data('color'));
});

或者，如果您要重用它：

utils.setColorFromEventElement = function() {
    utils.setColor($(this).data('color'));
};

和

$('.colorBlock').on('touchstart', utils.setColorFromEventElement);

旁注：

这条线可能还有第二个问题。你使用 utils.setBrushSize 作为事件处理程序。请注意，在对 setBrushSize 的调用中，this 将引用您挂钩事件的 DOM 元素，而不是 utils 。现在，给定utils这个名字，也许这无关紧要，但我想我会提到它。

更多： 神话方法，你必须记住this

你在参数对象中发送的值将始终是你调用 .on（） 语句时的数字。该函数不会在每次事件触发时动态重新调用。

我个人认为让 util 类去寻找一些 DOM 元素并获得它的值真的很丑陋，正如你提到的，你真正想做的是让你的 util 函数在与 .on（） 语句相同的范围内运行。

你的第一直觉可能是正确的。你不想要一个匿名函数，因为你希望能够调用 off（）。理想情况下，您需要一个命名函数，该函数与调用 on（） 语句的函数在相同的范围内运行。所以你要做的是将 util 函数绑定到你当前的范围：

$('#brushSize').on('touchend', utils.setBrushSize.bind(this));

然后在utils.setBrushSize中，$（this）是你从中调用.on（）的任何函数。

编辑 不过只是一个警告：当你调用 off（） 时，你想像这样调用它：

$('#brushSize').off('touchend', utils.setBrushSize);

不在新的范围绑定版本的 setBrushSize 上。JQuery 应该将其识别为您绑定的原始函数并关闭它。

重新编辑我现在意识到您的 val（） 在 $（'#brushSize'） 中，因为这就是您试图调用的"这个"......不是保存 on 语句的函数。在这种情况下，您可以这样做：

$('#brushSize').on('touchend', utils.setBrushSize.bind($(this)));

因此，这个特定问题的解决方案最终要求我将这段代码从Phone Gap中删除并在浏览器中重建。然后，我能够控制台.log发送到回调的事件，并检查它们以更好地理解事件对象。

解决方案是使用 event.target。这允许从 brushSize 范围侦听器获取 event.target.dataset.color，并从 brushSize 范围侦听器获取 event.target.value。

因此，对于未来的我，我最好在浏览器中有一个可靠的应用程序工作版本，并去除手机间隙的东西，以便更好地测试此类问题。

相关文章：