Question

Flight有一个很棒的事件系统，可以很容易地为组件节点设置事件处理程序。但是，在尝试响应包含动态元素的节点的委托事件时，有些事情让我望而却步。

情况如下：

   <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>元素，而不是访问接收到click事件的<a>元素。

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

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

这是工作JSBin

Answer 1

所以，在线Flight.js文档没有提到为这样的事件获取动态的委托目标（现在看，文档是最新的，所以实际上提到了{ {3}}现在）。

但是，既然有些人可能会错过，或者很难找到其他人，我想我会提到事件的动态委托目标可以通过第二个参数获取到名为的属性中的事件处理程序el。

所以，对于我们的处理程序，我们可以这样做：

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

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

希望这个小小的消息可以帮助那些正在转移到推特Flight.js框架的人。

获取航班组件事件的委派目标

1 个答案: