javascript事件处理程序的问题答案

【问题标题】：Problems with javascript event handlerjavascript事件处理程序的问题
【发布时间】：2018-03-27 02:26:21
【问题描述】：

我希望这不会被标记为“重复”，因为我已经查看了几个线程并遵循了我找到的建议。我知道我错过了一些简单的东西，需要其他人关注。我是新手，请多多包涵。我正在测试一个简单的按钮元素，我有一个点击事件处理程序，但它不起作用。它与“onclick”内联工作，但我试图避免这种情况。简单的html：

<div>
    <button id='handler'>Event</button>
</div>
<div id='stringText'>
    <h4>Some Description</h4>
    <p>
        Some more information
    </p>
</div>

还有 javascript：

<script>
    document.getElementById("handler").addEventListener("click", display, true);
    function display() {

        if (document.getElementById("stringText").style.display === "block") {
            document.getElementById("stringText").style.display = "none";
        } else {
            document.getElementById("stringText").style.display = "block";
        }

    };

</script>

我有最初将“stringText”显示设置为“none”的 css。感谢您的帮助。

【问题讨论】：

混合 CSS 和 style 属性是一件很有趣的事情。阅读此答案：stackoverflow.com/a/49289840/3662110
这是一本好书，而且很有道理。以后我会改正做法，谢谢！

标签： javascript eventhandler

【解决方案1】：

可能您的问题与在加载文档时执行该脚本有关。
添加此条件stringText.style.display === "" 以正确显示/隐藏元素。

另一种方法是使用事件 DOMContentLoaded

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
  document.getElementById("handler").addEventListener("click", display, true);

  function display() {
    var stringText = document.getElementById("stringText");
    if (stringText.style.display === "block" || stringText.style.display === "") {
      stringText.style.display = "none";
    } else {
      stringText.style.display = "block";
    }
  };
});

<div>
  <button id='handler'>Event</button>
</div>
<div id='stringText'>
  <h4>Some Description</h4>
  <p>
    Some more information
  </p>
</div>

【讨论】：

【解决方案2】：

请允许一些延迟使用window.onload 事件加载页面

<div>
    <button id='handler'>Event</button>
</div>
<div id='stringText'>
    <h4>Some Description</h4>
    <p>
        Some more information
    </p>
</div>

<script>
window.onload = function(){
 document.getElementById("handler").addEventListener("click", display, true);
};
   
    function display() {

        if (document.getElementById("stringText").style.display === "block") {
            document.getElementById("stringText").style.display = "none";
        } else {
            document.getElementById("stringText").style.display = "block";
        }

    };

</script>

【讨论】：

已更新事件，请检查。
工作就像一个魅力！谢谢你。 @Ele，这个解决方案也很有帮助。非常感谢。

【解决方案3】：

如果您确定并将初始显示属性设置为阻止它可以正常工作。作为替代方案，您也可以尝试使用jQuery，就像我在 sn-p 中所做的那样。

//with jquery

$(document).ready(function() {
  $('#handler').on('click', function() {
    $('#stringText').toggleClass('hide');
  })
})

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id='handler'>Event</button>
</div>
<div id='stringText'>
  <h4>Some Description</h4>
  <p>
    Some more information
  </p>
</div>

【讨论】：

加载DOM时有一个js事件要捕获。 jQuery 是不必要的。