Уважаемая
olya_097, в представленном Вами
коде нет почти ничего из заданных вопросов (1 - нет, 3-нет, 4.нет)
попробую потелепатить, скорее всего речь идет о событийной модели браузера, и ответы вы найдете тут:
1. телепатия мне не помогла
2. подробно
тут
3.
-
bubbles: true - подробно
тут
-
detail: +vote - по всей видимости увеличение счетчика голосования
4. подробно
тут
PS: был не прав :)
Павло Пономаренко, да действительно, не увидел
olya_097, был невнимателен, примите в качестве извинения за мой наезд:
/**
* функция реализует логику "компонента" voter. Используется так:
* var voter = new Voter({
* elem: document.getElementById('voter')
* });
* @param {object} options объект с параметрами, может содержать ключи
* - elem ссылка на html элемент, содержащий в
* себе кнопки уменьшения (html элемент с css
* классом class="down") и увеличения (html
* элемент с css классом class="up") а также
* элемент отображения текущего состояние (html
* элемент с css классом class="vote")
*
*/
function Voter(options) {
// делаем ссылку на html элемент короче, чтобы не писать везде options.elem
var elem = options.elem;
// получаем дочерний элемент '.vote'
var voteElem = elem.querySelector('.vote');
// устанавливаем для 'компонента' voter обработчик события 'click'
elem.onclick = function(event) {
if (event.target.closest('.down')) {
// если клик был по дочернему элементу '.down'
voteDecrease();
} else if (event.target.closest('.up')) {
// если клик был по дочернему элементу '.up'
voteIncrease();
}
}
// устанавливаем для 'компонента' voter обработчик события 'onmousedown'
elem.onmousedown = function() {
return false;
};
// ----------- методы -------------
// функция уменьшает значение в дочернем элементе '.vote' на единицу
function voteDecrease() {
setVote(+voteElem.innerHTML - 1);
// где:
// +voteElem.innerHTML - приведение строки voteElem.innerHTML к числу
// +1 - добавляем 1 :)
}
// функция увеличивает значение в дочернем элементе '.vote' на единицу
function voteIncrease() {
setVote(+voteElem.innerHTML + 1);
// где:
// +voteElem.innerHTML - приведение строки voteElem.innerHTML к числу
// +1 - добавляем 1 :)
}
// функция устанавливает дочернему элементу '.vote' значение равное
// числу, переданному в параметре vote
function setVote(vote) {
voteElem.innerHTML = +vote;
// создаем кастомный объект содержащий данные о событии
var widgetEvent = new CustomEvent(
// указываем имя кастомного событие "change".
"change",
// передав в качестве параметровнего данные о событии
{
bubbles: true, // тут расписано https://learn.javascript.ru/event-bubbling#vsplytie
detail: +vote // поле detail кастомного объекта события widgetEvent. Содержит текущее значение счетчика (+vote приводит значение vote к числу)
}
);
// инициируем (вызываем) у "компонента" voter созданное событие "change"
// c параметром detail содержащим установленное количество голосов
elem.dispatchEvent(widgetEvent);
// данное событие в данном конкретном случае мы ловим в index.html:
// document.getElementById('voter').addEventListener('change', function(e) {
// alert(e.detail);
// });
};
// экспортируем функцию setVote в глобальное пространство имен
this.setVote = setVote;
}
