javascript - 获取飞行组件事件的委托(delegate)目标

Question

Flight 有一个很棒的事件系统，可以轻松地为组件节点设置事件处理程序。然而，当我尝试响应包含动态元素的节点的委托(delegate)事件时，有几件事让我困惑。

情况如下:

   <div class="component">
       <ul id="list">
           <!-- dynamic elements show here -->
       </ul>
   </div>

和组件:

var ItemComponent = (function() {

  function ItemComponent() {
      this.defaultAttrs({
        listSelector: '#list',
        itemSelector: '#list li'
      });

      this.addItem = function(ev, params) {
        var item = $('<li>'),
            link = $('<a href="#">').html(params.content);
        this.select('listSelector').append(item.append(link));
      };

      this.itemClick = function(ev, params) {
        console.log("Item clicked: target=", ev.target);
        console.log("Item clicked: currentTarget=", ev.currentTarget);
      };

      this.after('initialize', function() {
        this.on(document, 'uiAddListItem', this.addItem);
        this.on('click', { 'itemSelector': this.itemClick });
      });
  }

  return flight.component(ItemComponent);

})();

$('#add-item-btn').on('click', function(){
  $(document).trigger('uiAddListItem', {
    content: $('input[name="item-content"]').val()
  });
});

ItemComponent.attachTo('.component');

这基本上只是让用户添加 li列表中的项目。每个<li>包含包含在 <a> 中的内容元素。但是，当处理程序运行时，我们希望访问实际的 <li>元素而不是 <a>接收点击事件的元素。

在 itemClick处理程序，event.target元素是收到点击的元素，在本例中为 <a>元素。还有event.currentTarget是事件也绑定(bind)的实际组件 ( <div class="component"> )。

如何获得委派的、动态的<li>在这种情况下的元素？

这是工作 JSBin

Answer 1

因此，在线 Flight.js 文档没有提到获取此类事件的动态委托(delegate)目标(现在查看，文档是最新的，因此实际上提到了 here现在)。

但是，由于某些人可能会错过它，或者其他人很难找到它，所以我想我会提到事件的动态委托(delegate)目标可以通过名为属性的事件处理程序的第二个参数来获取el。

因此，对于我们的处理程序，我们可以这样做:

this.itemClick = function(ev, params) {
    console.log("Actual Target: ", params.el);
};

现在，为什么委托(delegate)目标实际上被填充到处理程序的数据参数中，而实际上开发人员可能实际上会踩踏它，我不确定。将其作为 ._el 或类似内容附加到事件参数可能是一个更好的主意。

希望这个小花絮能够帮助那些正在转向 Twitter Flight.js 框架的人们。