问题标签 [event-delegation]

我正在编写一个需要 4 个参数的事件委托插件：

• 上下文 = 字符串选择器
• 子元素 = 字符串选择器
• 事件 = 字符串
• fn = 要调用的函数

如果父元素存在于 DOM 中，那么插件必须将事件委托给子元素。

当上下文元素与子元素相同时，就会出现问题。委托不再起作用，因为它期望传递的孩子是上下文的孩子。

这是一个失败的示例输入：

• 上下文 = “ul”
• 子元素 = “ul.active”
• 事件 = “点击”

你不能这样做，$('ul').on('click', 'ul.active', fn())因为有时'ul.active'会与'ul'相同。

我能想到的一种解决方案可能是：

我想知道在绑定委托事件之前检查'is child == context'是否更好，并将它们适当地绑定到情况

我有一个巨大的表（比如几千行），当我点击一行时，我会做一些简单的事情，比如改变行的颜色。问题是，当我单击一行时，更改颜色需要很长时间（1 秒）。我在 Chrome 和 Safari 中看到了这一点。但是当我在 Firefox 或 Opera 中尝试时，它是超级活泼的。

我认为事件委托（而不是将事件侦听器绑定到每一行，父 div 负责处理所有事件）会修复它，但不，它保持不变。

有什么帮助吗？

更新：（ 回顾，小提琴和赏金）

这个问题没有引起太多关注，所以我打算花一些时间来解决这个问题。我知道我的回答和问题往往过于冗长。这就是为什么我继续设置这个 fiddle的原因，在我看来，这是我目前必须用来接近冒泡change事件的那种代码的体面表示。我试图解决的几个问题：

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

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

我有一个网页，上面有超过 250 个选择元素和 20~30 个复选框。我还必须跟踪用户的行为，并采取适当的行动。因此，我很自然地委派更改事件，而不是添加数百个听众，恕我直言。

当然，IE - 公司政策：必须支持 IE8 - 在我需要时不会触发 onchange 事件。所以我试图伪造一个 onchange 事件。到目前为止，除了一件真正让我烦恼的事情之外，我的工作还算不错。
我正在使用onfocusin并onfocusout注册事件。在某些情况下，当用户从 a select 元素中选择一个新值时，脚本应该立即响应。但是，只要选择没有失去焦点，就不会发生这种情况。

到目前为止，这是我想出的：

我尝试在onfocusin处理程序中附加另一个事件侦听器，绑定到onclick事件。它触发了onfocusout任何选择具有焦点 ATM 的事件。唯一的问题是，99.9% 的用户会点击选择，因此该focusin事件也会触发 onclick。

为了解决这个问题，我创建了闭包，并将当前的焦点选择及其原始值作为参数传递给它。但是有些用户确实使用他们的键盘，这些用户经常在不更改值的情况下跳到下一个选择框。每次绑定一个新的 onclick 侦听器...我确实相信有一种比检查 alle.type并分别处理它们更简单的方法。
举个例子：带有额外onclick监听器的代码：所有代码都与第一个片段相同，所以我只是粘贴case 'select':块

I am working on iPad web application(not a native application) and am using the Sproutcore framework. I have a button defined in a .template file and is defined as:

{{view Octopus.ButtonView content="action_ChangePassword" targetBinding=".parentView.parentView.changePasswordTarget" actionBinding=".parentView.parentView.changePasswordAction" }}

changePasswordAction is defined in the view page but the function that it is binded with doesn't get triggered on an iPad. However the same function is triggered on the Desktop web application without a code-change. May I know if there is a different way for event-delegation from .template files on iPad as compared to desktop web applications?

我正在使用 jQuery 的事件委托向表行添加点击事件。我在该行的第一个 td 中也有一个复选框。当我单击行中的任意位置时，一切都按预期工作。但是，当我单击复选框时，我不希望该事件起作用。我尝试使用 :not() 选择器，但也许我遗漏了一些东西，因为当我单击复选框时我仍在触发事件。

HTML

jQuery

我可以得到帮助来解决我正在尝试做的事情吗？

编辑#2： 问题不存在了。这是某种范围界定问题。但现在它正在工作。对于给您带来的不便，我深表歉意。

在我的脚本的某些部分有一个事件委托并通过 id 指定目标。但是当我运行它时。这条线if(evt.target.id == ("subtaskSubmit" + subtaskCounter))似乎根本不起作用。这是我的代码：

编辑： 我做了一些更改来调试代码，结果很奇怪：

那么为什么会evt.target.id == ("subtaskSubmit" + subtaskCounter)退货false呢？

我在 JavaScript 中使用模块模式。我有一个文件说 controller.js 处理事件。问题是我想使用子模块。但是由于事件是在 controller.js 中处理的，如果出现任何事件，我将如何处理子模块中的事件？
我调度了一个PAGE_DISPLAYED从另一个文件中调用的自定义事件，比如 view.js。此事件由 controller.js 侦听，并根据显示的页面执行其他操作，例如绑定特定于该特定页面的附加事件处理程序。如何使用子模块做到这一点。

示例代码：

如何扩展上述代码和事件委托？或者代码架构是否存在任何限制。

我正在使用 jQuery Mobile 并PAGE_DISPLAYED通过监听事件来调度pagechange事件：

谢谢。

我正在使用 on 方法将单击事件委托给注入的 div。这些注入的 div 也将具有位于其父 div 之外的子 div。我希望忽略子 div 上的点击事件，但似乎无法弄清楚。这是一个例子：

这是一个小提琴：http: //jsfiddle.net/7ULUJ/

这是HTML

这是jQuery：

在 JavaScript 中，我曾经像这样使用事件委托：

jQuery 中的 this 等价于什么？我知道.on()但如何在事件委托中使用它？我的意思是这是怎么做到的：

但它不会和原版 JavaScript 中的一样吗？我想知道是否有更好的方法来实现它。如果这是唯一的方法，那么 jQuery 方法比 JS 方法有什么好处？

我有一些文本区域，其中有一些通过 AJAX 加载的占位符文本。我希望文本在焦点上消失，所以我将焦点事件委托给一个类。如果我单击文本区域并在单击/切换到其他输入元素时触发焦点事件，则会触发焦点事件。但是当我标签到 textarea 时它不起作用。这种行为在所有浏览器中都是一致的。这就是我正在做的事情。

hasInstructions是我的输入元素上的类，带有占位符文本。

当我将事件直接绑定到文本区域时，它工作得很好。

所以我的问题是，文本区域上的焦点事件不是冒泡了吗？如果是这样，我能实现这一目标的最佳方法是什么？

编辑：我知道在提出问题后改变问题的方式并不像这样。MikeD 的回答对原始问题完全有效，如果我没有得到更好的答案，我会接受。所以事情是这样的，

我正在使用 jQuery 1.4.2，我不能使用更高版本，因为我没有将库发送到页面。出于浏览器兼容性的原因，我不能使用 HTML5 占位符。