标签: event-delegation

我试图在Angular中实现类似委托模式的东西.当用户点击a时nav-item,我想调用一个函数然后发出一个事件,而该事件又由一些其他组件监听事件来处理.

这是场景:我有一个Navigation组件:

import {Component, Output, EventEmitter} from 'angular2/core';

@Component({
    // other properties left out for brevity
    events : ['navchange'], 
    template:`
      <div class="nav-item" (click)="selectedNavItem(1)"></div>
    `
})

export class Navigation {

    @Output() navchange: EventEmitter<number> = new EventEmitter();

    selectedNavItem(item: number) {
        console.log('selected nav item ' + item);
        this.navchange.emit(item)
    }

}

这是观察组件:

export class ObservingComponent {

  // How do I observe the event ? 
  // <----------Observe/Register Event ?-------->

  public selectedNavItem(item: number) {
    console.log('item index changed!');
  }

}

关键问题是,如何让观察组件观察相关事件？

任何人都可以用JavaScript解释事件委托,它有什么用？

我试图阻止一些事件,但stopPropagation不适用于"live",所以我不知道该怎么做.我在他们的网站上发现了这个.

直播活动不会以传统方式冒泡,也无法使用stopPropagation或stopImmediatePropagation停止.例如,假设有两个点击事件 - 一个绑定到"li",另一个绑定到"li a".如果内部锚点发生咔嗒声,将触发BOTH事件.这是因为当$("li").bind("click",fn); 您实际上是在说"只要在LI元素上发生click事件 - 或者在LI元素内部 - 触发此单击事件." 要停止对直播事件的进一步处理,fn必须返回false

它说fn必须返回false,所以我试图做

 $('.MoreAppointments').live('click', function(e) {
   alert("Hi");
   return false;
 });

但这没有用,所以我不知道如何让它返回false.

更新

这是一些更多的信息.

我有一个表格单元格,我将点击事件绑定到它.

 $('#CalendarBody .DateBox').click(function(e)
    {
        AddApointment(this);
    });

所以AddApointment只是做了一些ui对话框.

现在,实时代码(MoreAppointments)位于此表格单元格中,基本上是一个锚标记.因此,当我点击锚标签时,它首先转到上面的代码(addApointment - 所以首先运行该事件)运行但不启动我的对话框,而是直接进入(MoreAppointment)事件并运行该代码.该代码运行后,它将从"addApointment"启动对话框.

更新2

这是一些HTML.我没有复制整个表格,因为它有点大,所有单元格都用相同的数据重复.如果需要,我会发布它.

 <td id="c_12012009" class="DateBox">
        <div class="DateLabel">
            1</div>
        <div class="appointmentContainer">
            <a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a>
        </div>
        <div class="appointmentOverflowContainer">
            <div>
                <a class="MoreAppointments">+1 More</a></div>
        </div>
    </td>

我正试图在vanilla JS中进行事件委托.我有一个像这样的容器内的按钮

<div id="quiz">
    <button id="game-again" class="game-again"><span class="icon-spinner icon"></span><span>Go again</span></button>
</div>

按照David Walsh的不错说明,我正在向按钮的祖先添加一个事件处理程序,如下所示:

this.container.addEventListener('click', function(e){
    if (e.target && e.target.id == 'game-again') {
        e.stopPropagation();
        self.publish('primo:evento');
    }
});

this.container是#quiz元素.这有一半的时间,但其余的时间click事件的目标是按钮内的跨度之一,所以我的事件处理程序不会被调用.处理这种情况的最佳方法是什么？

我有一些像这样的标记(类只是用于解释):

<ol id="root" class="sortable">
  <li>
    <header class="show-after-collapse">Top-Line Info</header>
    <section class="hide-after-collapse">
      <ol class="sortable-connected">
        <li>
          <header class="show-after-collapse">Top-Line Info</header>
          <section class="hide-after-collapse">
            <div>Content A</div>
          </section>
        </li>
      </ol>
    </section>
  </li>
  <li>
    <header/>
    <section class="hide-after-collapse">
      <ol class="sortable-connected">
        <li>
          <header/>
          <section class="hide-after-collapse">
            <div>Content B</div>
          </section>
        </li>
      </ol>
    </section>
  </li>
</ol>

也就是说,嵌套的可排序列表.然而,可排序的插件就足够了,因为每个li(以下称"item")都保持其级别,尽管内部列表是连接的.这些项目具有始终可见的标题和处于展开状态时可见的部分,通过单击标题进行切换.用户可以随意添加和删除任何级别的项目; 添加顶级项目将在其中包含空巢列表.我的问题是关于新创建的项目的JS初始化:虽然他们将共享一些常见的功能,我可以通过它来覆盖

$("#root").on("click", "li > header", function() {
  $(this).parent().toggleClass("collapsed");
});

和

li.collapsed section {
  display: none;
}

(附带问题:这是一个使用详细信息/摘要HTML5标签的合适位置吗？看起来有点不确定那些是否会进入最终规范,我想要一个滑动过渡,所以看起来我好像无论如何都需要JS.但我把问题提交给群众.你好,群众.)

如果根列表是唯一保证在页面加载时存在的(相关)元素,为了使.on()有效地工作,我必须将所有事件绑定到该元素并为每个元素拼出精确的选择器,因为我明白它.因此,举例来说,为了将单独的函数绑定到彼此相邻的两个按钮,我每次都必须完全拼出选择器,àla

$("#root").on("change", "li > section button.b1", function() {
  b1Function();
}).on("change", "li > section button.b2", function() {
  b2Function();
});

那是准确的吗？在这种情况下,放弃.on()并在将新项目添加到页面时绑定我的事件更有意义吗？如果这会对响应产生影响,那么项目总数最多可能是数十个.

更新:( 回顾,小提琴和赏金)

这个问题并没有得到太多的关注,所以我要花一些代表.我知道我的答案和问题往往过于冗长.这就是为什么我继续设置这个小提琴,在我看来,这是我目前不得不用来接近冒泡change事件的代码.我正试图解决的几个问题:

1. 该pseudo-change事件不会触发一个select元素,除非它失去焦点.在某些情况下,应在选择新值时重定向客户端.我该如何实现这一目标？
2. 单击标签时调用处理程序,以及复选框本身.这本身就是你所期望的,但是由于事件冒泡它(AFAIK)无法确定点击了哪个元素.IE的事件对象没有realTarget属性.
3. checked通过单击标签在IE中更改复选框的-state时,一切都很好(虽然它需要一些讨厌的解决方法),但是当直接单击复选框时,会调用处理程序,但是检查状态保持不变,直到我单击一个第二次.然后值会更改,但不会调用处理程序.
4. 当我切换到另一个选项卡,然后再次返回时,会多次调用该处理程序.如果检查状态实际发生了变化,则三次,如果我直接单击一次,则两次.

任何可以帮助我解决上述一个或多个问题的信息将不胜感激.拜托,我没有忘记添加一个jQuery标签,我喜欢纯JS,所以我正在寻找一个纯粹的JS答案.

我有一个网页上有超过250个选择元素,以及20~30个复选框.我还必须跟踪用户的操作,并采取适当的措施.因此,我很自然地委派变更事件,而不是添加数百个听众,恕我直言.

当然,IE -company策略:IE8必须得到支持 - 在我需要时不会触发onchange事件.所以我想假装一个onchange事件.到目前为止,我所做的工作相当不错,除了一件真正让我烦恼的事情.
我正在使用onfocusin并onfocusout注册活动.在某些情况下,当用户从select元素中选择一个新值时,脚本应立即响应.但是,只要选择没有失去焦点,就不会发生这种情况.

这是我到目前为止所提出的:

i = document.getElementById('content');
if (!i.addEventListener)
{
    i.attachEvent('onfocusin',(function(self)
    {
        return function(e)
        {
            e = e || window.event;
            var target = e.target || e.srcElement;
            switch (target.tagName.toLowerCase())
            {
                case 'input':
                    if (target.getAttribute('type') !== 'checkbox')
                    {
                        return true;
                    }
                    return changeDelegator.apply(self,[e]);//(as is
                case 'select':
                    self.attachEvent('onfocusout',(function(self,current)
                    {
                        return function(e)
                        {
                            e = e || window.event; …

我有一个场景,我有一些文本,应该是用户可选择的.问题是,它上面有一个UI覆盖,这会阻止默认情况下选择文本.保持叠加层仍然能够选择文本的逻辑方法是使用合成事件(使用document.createEvent),但由于某种原因,它不能按预期工作.

事件似乎被正确委派并触发其处理程序,但未选择任何文本.我在这里有一个例子,这是对问题的粗略简化.

几点说明

1. 在FF中,如果您在叠加层之外开始选择,您仍然可以选择所需的文本,即使它位于叠加层下方
2. 当您在未覆盖区域中进行正常选择并单击覆盖图时,可以从委派mousedown事件中删除选择,但不会发生

我错过了一个应该委派的事件(我有mousedown,mousemove和mouseup)？或者是浏览器禁用此类行为的某种安全措施(请参阅注释2)？关于如何获得所需结果的任何其他建议？我知道我应该完全解决当前的叠加解决方案,但我已经对问题本身感到好奇.

我正在构建一个Angular 2 ngrx/store应用程序,并试图了解最佳实践.

• 我喜欢一个不可变状态,它只根据调度的动作进行更改,以便应用程序状态非常清晰且可调试.
• 我喜欢从"智能"容器中向下流动的单向数据,因为这样我们就可以使用异步管道来减少对状态的检查.

但是我不明白为什么在将动作发送到商店之前我们想要将事件从哑组件"冒泡"到智能组件.是否有可重复使用组件的唯一原因？在我看来,大多数组件都不会被重复使用,因为在我希望包含CSS的所有内容完全相同的情况下并不多.我还缺少其他任何好处吗？从可维护性/可读性的角度来看,能够直接看到在发生交互的组件上发送的操作是否更好？

我还没有看到这个函数的来源,但我想知道,它是否像这样工作:

1. 通过其选择器选择元素
2. 将提供的事件处理程序委托给他们
3. setInterval在该选择器上运行并不断取消委托,然后重新委派相同的事件

或者对此有一个纯JavaScript DOM解释？

动态创建的dom元素上的事件委派的本机实现是什么？

我试着查看jquery源代码,但我不能遵循.on方法.

注意:目前我在创建dom元素后附加了事件处理程序,这似乎很标准但我喜欢jquery .on使用这种语法处理动态创建的元素事件的方式$(document).on("click",".selector" ,处理程序);