从生命内部调用生命之外的代码

Question

我的代码成功地调用了一个函数，而这个函数又引用了我不知道如何调用的外部代码。

const msgbox = (function () {
  function showMsgBox(msg) {
    const modal = document.createElement("div");
    modal.classList.add("modal");
    modal.innerHTML = `<div class="modal-content"><p>${msg}</p></div>`;
    document.body.appendChild(modal);
    modal.style.display = "block";
    window.onclick = function (event) {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    };
  }
  return {
    showMsgBox: showMsgBox
  };
})();

  const example = document.getElementById("example");

  function changeClass() {
    if (example.getAttribute("class") === "classTwo") {
      example.classList.remove("classTwo");
      example.classList.add("classOne");
    } else {
      example.classList.add("classTwo");
      example.classList.remove("classOne");
    }
  }

  document.querySelectorAll(".change_class").forEach((item) => {
    item.addEventListener("click", function (e) {
      changeClass();
    });
  });
  
  document.querySelector(".showmsg").addEventListener("click", function (e) {
    msgbox.showMsgBox(
      'Call Function outside of IIFE=> <button class="change_class">Change Class</button> (<= this button should have the same functionality as the other button)'
    );
  });

我试着把非生命部分放入它自己的生命中，并给它一个单独的名称空间，但这是行不通的。上面的示例是我实际问题的简化版本，但这更简洁地封装了我的问题，使其不那么混乱。是的，我可以简单地把生活变成一个函数，然后这样称呼它，但我正在努力扩大我的知识。

这里有一个指向我为此创建的CodePen示例的链接:希望https://codepen.io/NoahBoddy/pen/PoOVMzK，我的解释是清楚的。如果没有，我可以提供更多的细节。谢谢!

Answer 1

新按钮没有运行单击事件代码的原因是因为它没有添加到其中

一次

document.querySelectorAll(".change_class").forEach((item) => {
  item.addEventListener("click", function (e) {
    changeClass();
  });
});

跑，就这样。任何带有该类的新元素都不会使上述代码自动运行。

创建按钮后，可以将相同的事件处理程序添加到新创建的按钮中--这很繁琐，并且重复代码--如果需要进行更改，则可能需要更改多个位置。一个错误代码的配方。

或者..。下面是一个使用事件委托的解决方案

​

const msgbox = (function () {
    function showMsgBox(msg) {
        const modal = document.createElement("div");
        modal.classList.add("modal");
        modal.innerHTML = `<div class="modal-content"><p>${msg}</p></div>`;
        document.body.appendChild(modal);
        modal.style.display = "block";
        window.onclick = function (event) {
            if (event.target === modal) {
                modal.style.display = "none";
            }
        };
    }
    return {
        showMsgBox: showMsgBox
    };
})();

const example = document.getElementById("example");
function changeClass() {
    if (example.getAttribute("class") === "classTwo") {
        example.classList.remove("classTwo");
        example.classList.add("classOne");
    } else {
        example.classList.add("classTwo");
        example.classList.remove("classOne");
    }
}
const change_class = document.getElementsByClassName("change_class");
document.body.addEventListener('click', function(e) {
    if ([...change_class].includes(e.target)) {
        changeClass();
    }
});

document.querySelector(".showmsg").addEventListener("click", function (e) {
    msgbox.showMsgBox('<button class="change_class">Change Class</button>');
});

* { font-family: sans-serif; }
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.classOne {
  background: #088;
  color: #fff;
  padding: 0.5rem;
}
.classTwo {
  background: #808;
  color: #fff;
  padding: 0.5rem;
}

<button class="change_class">Change Class</button>
<br><br>
<div id="example" class="classOne">This will alternately use 'classOne' and 'classTwo'</div>
<br>
<button class="showmsg">Show MsgBox</button>

​

正如代码中所指出的，document.getElementsByClassName返回一个live列表(querySelectorAll没有)

这意味着，与指定类一起添加的任何新元素都将出现在该列表中，而无需执行任何操作。对于已删除的元素，它们也会从列表中消失。

注意：getElementsByClassName也是任何元素的方法，所以您不必在文档中获取所有这样的元素，您可以使用它来获取DOM中选定元素下的目标元素--并不适用于本代码，而是一些可能有用的内容。

Answer 2

模态中的按钮没有click处理程序，所以它什么也不做：

msgbox.showMsgBox(
   'Call Function outside of IIFE=> <button class="change_class">Change Class</button> (<= this button should have the same functionality as the other button)'
);

您可以内联地设置click处理程序：

msgbox.showMsgBox(                             
   'Call Function outside of IIFE=> <button onclick="changeClass()" class="change_class">Change Class</button> (<= this button should have the same functionality as the other button)'
);

演示1

或者您可以更新showMsgBox()以添加处理程序：

function showMsgBox(msg) {
  const modal = document.createElement("div");
  ⋮
  modal.querySelectorAll(".change_class").forEach((item) => {
    item.addEventListener("click", function (e) {
      changeClass();
    });
  });
}

演示2