1

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

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

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

这是工作的JSBin

4

1 回答 1

1

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

但是，由于某些人可能会错过它，或者其他人很难找到它，我想我会提到事件的动态委托目标可以通过名为el.

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

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

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

希望这个小消息能帮助那些正在转向 twitter Flight.js 框架的人。

于 2014-06-06T18:34:44.340 回答