有没有一种方法可以在javascript中生成onclick事件函数，而不在html代码中包含onclick

Question

我是个初学者，如果我的问题很愚蠢，请向我道歉。

我有一个无序的列表和一个HTML中的按钮，我想让按钮通过javascript显示或隐藏列表，但我试图避免在HTML代码中给按钮赋予onclick属性。

var btn = document.getElementById("button");
btn.onclick = function(){

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

<ul id=ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ul>
<input id="button" type="button" name="button" value="press me!" >

我在这里错过了什么，不能让它发挥作用？只有当我在HTML中包含onclick属性并为其onclick事件生成showhide()函数时，才能执行此操作，但从长远来看，这似乎不切实际。

Answer 1

是的，您使用addEventListener

var btn = document.getElementById("button");
btn.addEventListener('click',function(){

var ul = document.getElementById("ul");
if(ul.style.display=='none') ul.style.display='block'
else ul.style.display='none'  
});

<ul id="ul">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ul>
<input id="button" type="button" name="button" value="press me!" >

Answer 2

您可以在JavaScript上使用addEventListener定义事件处理程序。

var btn = document.getElementById("button");
btn.addEventListener('click', function(){
var ul = document.getElementById("ul");
if(ul.style.display=='none'){
ul.style.display='block'}
else{ul.style.display='none'}  
});

<ul id="ul">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ul>
<input id="button" type="button" name="button" value="press me!" >