在jQuery中,您可以执行以下操作:
$('#j_unoffered').on('click', '.icon_del', function () {...
j_unoffered
如果icon_del
单击具有class的任何后代元素,则会在该元素上放置一个处理程序。此外,它适用于任何随后创建的icon_del
元素。
我可以在单击元素本身的“关闭”中正常工作。
goog.events.listen(
goog.dom.getElement('j_unoffered'),
goog.events.EventType.CLICK,
function(e) {...
如何在Closure中指定一个适用于其子代/后代的父事件目标,其方法与jQuery示例相同?
我以为我需要使用setParentEventTarget
某种方式,但是我不确定如何为DOM事件实现它。我发现的大多数文档都与自定义调度事件有关。
-更新-
我想知道这个简单的解决方案是否有任何问题:
goog.events.listen(
goog.dom.getElement('j_unoffered'),
goog.events.EventType.CLICK,
function(e) {
if (e.target.className.indexOf('icon_del') !== -1) {...
它仍然保留this
与父级绑定,但e.target
允许变通方法。listen
(opt_handler)中的第五个参数允许您绑定this
到其他东西,所以我想这也是一个途径。
我也不知道这种可能性,所以我建议其他代码:
var addHandler = function(containerSelector, eventType, nestSelector, handler) {
var parent = goog.isString(containerSelector) ?
document.querySelector(containerSelector) :
containerSelector;
return goog.events.listen(
parent,
eventType,
function(e) {
var children = parent.querySelectorAll(nestSelector);
var needChild = goog.array.find(children, function(child) {
return goog.dom.contains(child, e.target);
});
if (needChild)
handler.call(needChild, e);
});
});
用法:
addHandler('#elem', goog.events.EventType.CLICK, '.sub-class', function(e) {
console.log(e.target);
});
更新:
如果您将使用此功能e.target.className.indexOf('icon_del')
,则可能会错过正确的事件。考虑一个具有id =的div容器container
,它具有几个class的div innerContainer
,并且每个容器都包含class =的几个div finalDiv
。考虑到您将在上面的代码中添加事件处理程序,该代码将检查e.target中的innerContainer
类。问题在于用户何时单击finalDiv
您的处理程序将被调用,但事件目标将是finalDiv
,不是innerContainer
,而是包含在其中。您的代码会丢失它,但是不会。我的代码检查e.target是否具有嵌套类或它包含的类,因此您不会错过此类事件。
opt_handler
也不能真正帮助您,因为您可能想处理许多嵌套元素(您将在其中传递哪些嵌套元素?也许是全部,但不是很有帮助,您可以随时在事件处理程序中获取它们),而且它们可以在之后动态添加,因此当您添加处理程序时,您可能不知道它们。
总之,我认为在事件处理程序中进行此类工作是合理且最有效的。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句