如何在 JavaScript 中正确编写 onclick 事件？答案

【问题标题】：How do you properly write onclick events in JavaScript?如何在 JavaScript 中正确编写 onclick 事件？
【发布时间】：2018-01-10 09:03:50
【问题描述】：

我正在尝试使用带有锚标记的 onclick 事件，该标记将更改页面上另一个元素的 innerHTML。我不确定我做错了什么，所以我使用的所有代码都在下面。我希望你们能指出我的错误并告诉我我误解了什么。 JavaScript 文件包含在正文之后，但您可以在 JSfiddle here 上看到它。因此，当我单击设置时，我希望 BookmarkList div 显示它自己的 HTML 代码，对于 Home 也是如此。 BookmarkList div 将成为该站点的焦点。我只是不确定我做错了什么。

HTML：

<body id="bodyBG">
<div class="wrapper">
<div class="box header">
Header
</div>
<div class="box content">
    <div class="box subcontent1">   
        <div class="sdfgsdfgsdfg"><input id="categoryName" placeholder="Category Name"></input></div>
        <div class="sdfgsdfg"><input id="urlLink" placeholder="Site Address"></input></div>
        <div class="sdfgsddfg"><input id="bookmarkName" placeholder="Bookmark Name"></input></div>
        <div><button>Save</button></div>
        <hr>
        <input placeholder="Search Bookmarks"></input>
        <button>Search</button>
    </div>
    <div class="box subcontent2">
        <a href="#" id="settingsNav" onclick="myFunction(this)">Settings</a>
        <hr>
        <a href="#" id="homeNav" onclick="myFunction(this)">Home</a>
        <a href="#">Back</a>
        <a href="#">Forwards</a>
    </div>
    <div id="bookmarkList" class="box subcontent3 bookmark-list">
    </div>
</div>
<div class="box footer">Footer</div>
</div>
<script src="assets/js/bookmark-action-script.js"></script>
</body>

JavaScript：

var settingsNav = document.getElementById('settingsNav');
var homeNav = document.getElementById('homeNav');

var changeThis = document.getElementById("bookmarkList");

function myFunction(this) {
if (this === settingsNav) {
    changeThis.innerHTML = "<h3>Bookmarks</h3><hr>";
}
else if (this === homeNav) {
    changeThis.innerHTML = "<h3>Bookmarks</h3><hr><p>Store all your bookmarks here!</p><ul><li>An secure storage means for your privacy needs!</li><li>24/7 Availability</li></ul>";
}
else (this != settingsNav | homeNav) {
    changeThis.innerHTML = "Nothing to see here!";
}
};

document.getElementById("settingsNav").addEventListener("click");
document.getElementById("homeNav").addEventListener("click");

解决方案： 我总是添加适合我的问题的解决方案，因此未来的观察者可以看到我遇到了什么问题以及解决方案是什么。我的问题是没有将该功能添加到我的事件监听器中。如果您在 JavaScript 代码中指定带有附带函数的事件侦听器，则无需在 HTML 代码中指定 onclick 事件。但是如果没有与事件监听器相关的功能，什么都不会发生。我现在明白了。

var settingsNav = document.getElementById('settingsNav');
var homeNav = document.getElementById('homeNav');
var changeThis = document.getElementById("bookmarkList");

function myFunction(event) {
var el = this;
if (el === settingsNav) {
changeThis.innerHTML = "<h3>Bookmarks</h3><hr>";
} else if (el === homeNav) {
changeThis.innerHTML = "<h3>Bookmarks</h3><hr><p>Store all your bookmarks here!</p><ul><li>A secure storage means for your privacy needs!</li><li>24/7 Availability</li></ul>";
} else if (el != settingsNav || homeNav) {
changeThis.innerHTML = "Nothing to see here!";
}
};

document.getElementById("settingsNav").addEventListener("click", myFunction);
document.getElementById("homeNav").addEventListener("click", myFunction);

【问题讨论】：

你有内联 HTML onclick 事件，并且你在 JS 上有一个 EventListener 没有绑定到它的函数，必须选择一种方式或另一种方式，最好是 JS EventListener
你必须将一个函数传递给addEventListener?!
@Bergi 如果我对这门语言那么了解，我就不会在这里寻求帮助...
@pv2.al1290 我只是想知道您希望 addEventListener 方法在没有侦听器的情况下做什么……您认为该调用会做什么？
那些极度缺乏这门语言知识的人不会发现它很容易学习。我查了几十个例子，但直到我看到第二个答案，我才明白你的意思。

标签： javascript html

【解决方案1】：

从 HTML 中删除属性事件处理程序。将 function (this) 更改为 function (event). You did not add an event handler at.addEventListener()call, where you can passmyFunction` 作为对在调度事件时调用的函数的引用。

JavaScript 中的 OR 应该是 || 而不是 | 第二个 else..if

注意，<input> 元素是自动关闭的，</input> 是无效的 HTML。

<body id="bodyBG">
<div class="wrapper">
<div class="box header">
Header
</div>
<div class="box content">
    <div class="box subcontent1">   
        <div class="sdfgsdfgsdfg"><input id="categoryName" placeholder="Category Name"></div>
        <div class="sdfgsdfg"><input id="urlLink" placeholder="Site Address"></div>
        <div class="sdfgsddfg"><input id="bookmarkName" placeholder="Bookmark Name"></div>
        <div><button>Save</button></div>
        <hr>
        <input placeholder="Search Bookmarks">
        <button>Search</button>
    </div>
    <div class="box subcontent2">
        <a href="#" id="settingsNav">Settings</a>
        <hr>
        <a href="#" id="homeNav">Home</a>
        <a href="#">Back</a>
        <a href="#">Forwards</a>
    </div>
    <div id="bookmarkList" class="box subcontent3 bookmark-list">
    </div>
</div>
<div class="box footer">Footer</div>
</div>
<script>
var settingsNav = document.getElementById('settingsNav');
var homeNav = document.getElementById('homeNav');

var changeThis = document.getElementById("bookmarkList");

function myFunction(event) {
  var el = this;
  if (el === settingsNav) {
    changeThis.innerHTML = "<h3>Bookmarks</h3><hr>";
  } else if (el === homeNav) {
    changeThis.innerHTML = "<h3>Bookmarks</h3><hr><p>Store all your bookmarks here!</p><ul><li>An secure storage means for your privacy needs!</li><li>24/7 Availability</li></ul>";
  } else if (el != settingsNav || homeNav) {
    changeThis.innerHTML = "Nothing to see here!";
  }
};

document.getElementById("settingsNav").addEventListener("click", myFunction);
document.getElementById("homeNav").addEventListener("click", myFunction);
</script>
</body>

【讨论】：

【解决方案2】：

通过修复几个语法错误，您的代码在 Chrome 中运行良好。

将else 更新为else if

else if (clk != settingsNav | homeNav)

将 this 参数更新为 myFunction 中的其他内容

function myFunction(clk)

由于您在onclick 中调用了myFunction，因此无需添加事件，因此请删除：

document.getElementById("settingsNav").addEventListener("click");
document.getElementById("homeNav").addEventListener("click");

不知何故，它在 jsfiddler 中不起作用。

【讨论】：