jquery JavaScript中的反向事件冒泡

8ehkhllq  于 2022-12-03  发布在  jQuery
关注(0)|答案(3)|浏览(200)

如你所知,JavaScript中的事件通常是冒泡的,所以首先执行触发事件的元素的事件处理程序,然后调用父元素的事件处理程序,依此类推。这种行为会导致我目前正在做的项目出现一些问题,我宁愿颠倒执行顺序。
我想出了一个使用超时的解决方案:

$(element).mouseover(function(){
    var that = this;
    setTimeout(function() {
       //actual event handler, but references to "this" are replaced with "that"
    },$(this).parents().length)
 });

因此,基本上,事件处理程序在短暂超时后执行,等待时间取决于DOM树中元素的深度:html-element的事件处理器立即执行,body元素的事件处理器等待1 ms后执行,依此类推,因此事件的执行顺序相反。
我的第一次测试结果是积极的,但我仍然不确定这个解决方案是否有任何问题或缺点。你认为这个解决方案如何?关于如何解决这个问题的其他想法也非常感谢。

pbgvytdp

pbgvytdp1#

反向事件冒泡称为捕获阶段。
请参阅DOM事件架构
true作为第三个参数传递给Event.addEventListener,使其在捕获阶段触发

el.addEventListener("click", function () {
  console.log("i run in capture");
}, true);

当然,它不能在遗留平台上工作。您需要一个DOM3事件填充程序来模拟事件系统。

rkue9o1l

rkue9o1l2#

你可以试着模仿它,但它可能会带来很多麻烦。
这是一个非常非常简单的例子(在jsfiddle上)。这个想法是聚集每个事件的回调,并在document事件处理程序中以相反的顺序调用它们(我们还清除了我们的列表,以确保下次单击时有新的队列)。
第一个
也许你需要改变你的设计?你能张贴更多的信息,为什么你需要事件捕捉?

r1zk6ea1

r1zk6ea13#

我可以看到你的解决方案的一个巨大的缺点是,对于每个处理的事件,你必须从this开始向上遍历DOM来建立父节点的数量。
在每个事件处理程序中以这种方式遍历=低性能。

相关问题