Question

鉴于代码：

var event = new Event('build');

// Listen for the event.
elem.children[0].addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

不调用子元素的处理程序。见https://jsfiddle.net/mvjh7700/

有没有办法调用处理程序而不直接在子代（或其后代）上调度事件？在我的实际使用案例中，各种元素（后代，而不是直接的孩子）听取build事件，我不确切地知道哪个（并且不希望用类标记它们）。

或者，对于我的用例，如果我能找到所有在'build'上有处理程序的元素就可以了，然后我可以在每个上调用该事件。但是，我仍然想知道原始问题的答案

Answer 1

这里你举一个有效的例子。 https://jsfiddle.net/mvjh7700/4/

<div id="target">
    <div id="child">hi</div>
</div>

var theParent = document.getElementById('target');
var childElement = theParent.children[0];

childElement.addEventListener('build', doSomething, false);

function doSomething(e) {
    var clickedItem = e.target.id;
    alert("Hello " + clickedItem);
}
var myEvent = new CustomEvent("build", {
    detail: {
        username: "stanimir"
    },
});

childElement.dispatchEvent(myEvent);

Answer 2

如果您使用bubble，则可以撤消逻辑。不应将eventListeners添加到children，而应将它们分派并将侦听器放在DOM中。所以你会得到相同的结果，但是听众少，调度员也多。参见示例，在这种情况下，如果您想要一个通用处理程序，只需将处理程序放在窗口上并听取所有调度事件：

var event = new Event('build', {bubbles: true});
var elem = document.getElementById('target')

window.addEventListener('build', function (e) { console.log(e.target) }, true);
elem.addEventListener('build', function (e) { console.log(e.target) }, true);

elem.children[0].dispatchEvent(event);

https://jsfiddle.net/4fnqby8s/4/

有没有办法触发事件目标的子项处理程序？

2 个答案: