时间戳

首页 > 解决方案 > 如何在 js 中对嵌套的事件监听器进行排序

javascript - 如何在 js 中对嵌套的事件监听器进行排序

问题描述

我的 js 中有以下代码：

const someElement = document.getElementById('some-element')
    
someElement.addEventListener('click', function(){
        console.log('The start of main event')
    
        const someOtherElement = document.getElementById('some-other-element')
        someOtherElement.addEventListener('load', function () {
            console.log("someOtherElement is invoked")
})
    
        console.log("This is the end of main event")
})

如何使这段代码完全按照实际编写的代码的顺序运行。我想要以下结果：

主赛事开始

调用 someOtherElement

主赛事到此结束

但是，当代码运行时，我得到以下结果：

主赛事开始

主赛事到此结束

调用 someOtherElement

标签： javascriptaddeventlistener

解决方案

load 事件只会被调用一次（在你的元素加载之后）。例如，如果你有一张图片，你已经为其放置了一个加载事件，加载事件只会在元素加载后触发一次。因此，如果您在已经加载some-element 后 单击，则不会触发 load 事件。some-other-element

此外，如果单击some-other-element之后加载some-element，它将在和someOtherElement invoked之后记录。The start of main eventThis is the end of main event

请记住： 您只能在<body>、<frame>、<iframe>、<img>、<input type="image">、<link>、<script>、 和<style>标签上添加加载事件。

编辑：正如@epascarello 在评论中所说，如果您多次单击，some-element它将向. 要解决此问题，您可以使用一个变量：some-other-element

const someElement = document.getElementById("some-element");
let eventBinded = false;

someElement.addEventListener("click", function () {
    console.log("The start of main event");

    const someOtherElement = document.getElementById("some-other-element");

    if (!eventBinded) {
        eventBinded = true;

        someOtherElement.addEventListener("load", function () {
            console.log("someOtherElement is invoked");
        });
    } else {
        console.log("Event already binded");
    }

    console.log("This is the end of main event");
});

推荐阅读