jQuery .data与eventData的区别

Question

当设置事件处理程序(提交、点击、按键等)时，获取数据并在处理程序中使用最快和最有效的方法是什么？我应该像这样做吗：

$obj.data({name: value, ...});

$obj.click(function(e){
  var $this = $(e.target),
    name = $this.data(name);
});

还是像这样做比较好吗：

$obj.bind('click', {name: value}, function(e) {
  var $this = $(e.target),
    name = e.data.name;
});

我是否遗漏了其他需要考虑的因素？

- craveytrain

Answer 1

无论哪种方式都可以，你在略微不同的位置存储相同的数据，但是第一种方式可以更节省资源，使用$.data()而无需创建jQuery对象，像这样：

$obj.data({ name: value });
$obj.click(function(e) {
  var name = $.data(this, 'name');
});

个人而言，我觉得第二种方法更加简洁，它的等效版本总体上更短：

$obj.bind('click', {name: value}, function(e) {
   var name = e.data.name;
});

- Nick Craver

---

是的，我想对于这个例子来说它是无关紧要的，我只是从我的代码中剪切掉了它，因为我几乎总是在创建它。 - craveytrain

Answer 2

基本上是同样的事情，但使用.click（在jQuery 1.4.3中添加）会更加简洁：

$obj.click({name: value}, function(e) {
    var name = e.data.name;
});

- absynce

Answer 3

可能有些晚了，但对于某些人可能会有用。

我认为这取决于情况。如果您的数据在事件处理程序创建时已经最终（或者是一个对象，您可以从代码的其他区域访问），那么第二种方法就可以了。

另一方面，如果您使用$.data()函数，则始终会引用实际数据。如果数据可能在事件触发之前被更改。

- kainar

Answer 4

还有另一种方法，它更好，因为您可以通过“this”子句访问数据属性：

        var tst = {
            a:1, 
            b:2, 
            clickHandler: function(e) {
                alert(this.a);
                alert($(e.target).attr('id'));
            }
        };

        $('#btn').click(tst.clickHandler.bind(tst));

- Andrey Tagaew