Форум

AndriiS · #1 (**permalink**) 14.10.2018, 23:00

Здравствуйте!

Я сейчас изучаю обработчики событий. А конкретно в данном случае, удаление обработчика событий. Есть три кнопки, одна из которых добавляет обработчик, вторая убирает. А третья это демонстрирует.

html часть:

<body>
<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 src="./js/js.js"></script>
</body>

js часть (тут код с моими комментариями):

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

(2) // создаем функцию обработчик:
const handleClick = () => {alert("CLICK EVENT LISTENER ALERT!");};

(3) // назначаем обработчик для переменой addBtn по событию click...
addBtn.addEventListener("click", () => {
btn.addEventListener("click", handleClick);
});

removeBtn.addEventListener("click", () => {
btn.removeEventListener("click", handleClick);
});

Вопрос: Что происходит в третьей части кода? Назначается обработчик для переменной addBtn по событию click. Вторым параметром метода addEventListener, handler, выступает целая стрелочная функция без аргументов... которая выполняет то-же самое что и внешняя для функции handleClick...

Я за день мозг сломал. Объясните пожалуйста поподробнее что происходит в части (3).

Malleys · #2 (**permalink**) 15.10.2018, 00:42

<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>

Сообщение от AndriiS

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

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

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

или так...

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

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

P. S.

Сообщение от AndriiS

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

Я к вашему примеру добавил флажок, регулирующий возможность выключения фукционала кнопок «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>

Dilettante_Pro · #3 (**permalink**) 15.10.2018, 12:01

AndriiS, посмотрите расширенный комментарий к пункту 3.

активация-деактивация кнопок без флагов....

<body>
<div class="container">
<button class="btn" data-action="add">Add Listener</button>
<button class="btn" data-action="remove" disabled>Remove Listener</button></div>
<hr>
<button id="btn" class="btn" disabled>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");

(2) // создаем функцию обработчик:
const handleClick = () => {
   alert("CLICK EVENT LISTENER ALERT!");
   addBtn.disabled = true;
   removeBtn.disabled = false;
   btn.disabled = false; 
};

(3) // назначаем обработчик для переменой addBtn по событию click, по которому назначается обработчик события click по кнопке btn
addBtn.addEventListener("click", () => {
   addBtn.disabled = true;
   removeBtn.disabled = false;
   btn.disabled = false; 
   btn.addEventListener("click", handleClick);
});

removeBtn.addEventListener("click", () => {
   addBtn.disabled = false;
   removeBtn.disabled = true;
   btn.disabled = true; 
   btn.removeEventListener("click", handleClick);
});
</script>
</body>

Форум

Справочник

Discord чат

Курсы javascript