Какие есть способы, а самое главное как правильно передавать аргументы в функцию в обработчике событий
Например:
var menu = document.querySelector('.nav');
var ul = menu.querySelector('ul');
function handler(event, bool) {
event = event || window.event;
if(event.target.tagName == 'LI') {
if(bool) {
ul.style.backgroundColor = 'red';
} else {
ul.style.backgroundColor = '';
}
}
}
menu.addEventListener('mouseout',handler.bind(null, event, false), false);
menu.addEventListener('mouseover',handler.bind(this, event, true), false);
Вроде работает, но разнице нет какой контекст я передаю в bind, хоть this, хоть null, хоть вася....
Далее. Изначально код функции был такой:
function handler(event, bool) {
if(event.target.tagName == 'LI') {
var ul = menu.querySelector('ul');
if(bool) {
ul.style.backgroundColor = 'red';
} else {
ul.style.backgroundColor = '';
}
}
}
При этом event == undefined, ul == undefined
Добавил в начало функции строку: event = event || window.event; - event появился, вынес var ul = menu.querySelector('ul'); из функции стало работать.
Так как же правильно передавать аргументы?
Ответ
Используйте handler.bind(null, false)
С сигнатурой function handler(bool, event)
handler.bind(null, false) как раз вернёт функцию с одним аргументом для события.
function handler(bool, event) {
console.log(bool, event);
}
let handleFalse = handler.bind(null, false);
let handleTrue = handler.bind(null, true);
handleFalse('Event 1');
handleTrue('Event 2');
Либо можно использовать замыкание(если не нужен контекст this):
function getHandler(bool) {
return function handler(event) {
console.log(bool, event);
}
}
let handleFalse = getHandler(false);
let handleTrue = getHandler(true);
handleFalse('Event 1');
handleTrue('Event 2');
Ну и соберём в кучу:
var menu = document.querySelector('.nav');
var ul = menu.querySelector('ul');
function handler(bool) {
return function (event) {
event = event || window.event;
if(event.target.tagName == 'LI') {
event.target.style.backgroundColor = bool ? 'red' : '';
}
}
}
menu.addEventListener('mouseout',handler(false), false);
menu.addEventListener('mouseover',handler(true), false);
Хотя, на мой взгляд, .nav li:hover{} куда лучше
Комментариев нет:
Отправить комментарий