javascript中点击事件的双重功能

Question

如何在不与第一个功能冲突的情况下在同一个单击按钮上添加双重功能。

btn.addEventListener('click', drop);

function drop(){
items.style.display = 'block';
items.style.display = 'none';

html中的下拉菜单。

Answer 1

只需多次使用addEventListener绑定函数。

 const btn = document.getElementById('btn'); btn.addEventListener('click', job1); btn.addEventListener('click', job2); function job1(){ console.log('Job 1 triggered'); } function job2(){ console.log('Job 2 triggered'); }

 <button id="btn">Click me</button>

Answer 2

您可以将函数包装在一个函数中：

 const btn = document.getElementById('btn'); btn.addEventListener('click', () => {drop(), other()}); function drop(){ // items.style.display = 'block'; // items.style.display = 'none'; console.log('drop triggered'); } function other(){ console.log('other triggered'); }

 <button id="btn">Click me</button>