[Malleys]

<div class="container">
	<button class="btn" data-action="add">Add Listener</button>
	<button class="btn" data-action="remove">Remove Listener</button>
</div>
<hr>
<button id="btn" class="btn">CLICK ME!</button>

<script>
// (1) получаем в переменные объекты по конкретному значению атрибута:
const addBtn    = document.querySelector("button[data-action=add]");
const removeBtn = document.querySelector("button[data-action=remove]");
const btn       = document.querySelector("#btn");

// (2) создаем функцию обработчик:
// Эта функция с именем handleClick будет вызываться, когда она 
// будет зарегистрирована как обработчик события. Ей в качестве
// аргумента будет передаваться экземпляр класса Event, который
// содержит информацию о происшедшем событии. Обратите внимание
// на то, что передача аргумента происходит вне зависимости от
// объявления в списке аргументов. 
const handleClick = event => { alert("CLICK EVENT LISTENER ALERT!"); };
// const handleClick = () => { alert("CLICK EVENT LISTENER ALERT!"); };

// (3) назначаем обработчик для переменой addBtn по событию click...
// При нажатии на кнопку «Add Listener» на кнопке «CLICK ME!»
// регистрируется обработчик handleClick, так что при нажатии
// на кнопку «CLICK ME!» будет вызываться handleClick с актуальным
// экземпляром класса Event
addBtn.addEventListener("click", () => {
	btn.addEventListener("click", handleClick);
});

// При нажатии на кнопку «Remove Listener» у кнопки «CLICK ME!»
// отнимается обработчик handleClick, так что при нажатии
// на кнопку «CLICK ME!» больше не будет вызываться handleClick 
removeBtn.addEventListener("click", () => {
	btn.removeEventListener("click", handleClick);
});
</script>

стрелочная функция без аргументов

Как уже было отмечено ей передаётся параметр, только вы не хотите его принимать... Можно было записать так...

addBtn.addEventListener("click", _ => {
	btn.addEventListener("click", handleClick);
});

или так...

addBtn.addEventListener("click", event => {
	btn.addEventListener("click", handleClick);
});

Вы можете нажимать много раз на «Add Listener», но один и тот же обработчик добавляется только один раз! Т. е. если вы нажмёте 5 раз «Add Listener» и один раз «CLICK ME!», то у вас всплывёт только одно диалогое окно.

P. S.

Я за день мозг сломал.

Я к вашему примеру добавил флажок, регулирующий возможность выключения фукционала кнопок «Add Listener» и «Remove Listener». Поломаете мозг? Или теперь это слишком просто?

<div class="container">
	<button class="btn" data-action="add">Add Listener</button>
	<button class="btn" data-action="remove">Remove Listener</button>
	<label><input data-action="register" type="checkbox" checked> Registered</label>
</div>
<hr>
<button id="btn" class="btn">CLICK ME!</button>

<script>
const addBtn     = document.querySelector("button[data-action=add]");
const removeBtn  = document.querySelector("button[data-action=remove]");
const btn        = document.querySelector("#btn");
const registerCB = document.querySelector("input[data-action=register]");

const handleClick    = _ => alert("CLICK EVENT LISTENER ALERT!");
const addListener    = _ => btn.addEventListener("click", handleClick);
const removeListener = _ => btn.removeEventListener("click", handleClick);

addBtn.addEventListener("click", addListener);
removeBtn.addEventListener("click", removeListener);

registerCB.addEventListener("input", ({ target }) => {
	if(target.checked) {
		addBtn.addEventListener("click", addListener);
		removeBtn.addEventListener("click", removeListener);
	} else {
		addBtn.removeEventListener("click", addListener);
		removeBtn.removeEventListener("click", removeListener);
	}
});

</script>