Основно съдържание

Програмиране

Курс: Програмиране > Раздел 6

Урок 5: DOM събития

Обобщение: DOM събития

Добавяне на слушател за събития (event listener)

За да се увериш, че браузърът извиква определена функция, когато дадено събитие се изпълни на един елемент, трябва да използваш document.addEventListener:

var buttonEl = document.getElementById("clicker");
var onButtonClick = function() {
console.log("О, чудо, ти ме кликна");
};
buttonEl.addEventListener("click", onButtonClick);

Можеш да подаваш още много други валидни символни низове като първи аргумент – виж статията за видове събития.

Ако искаш информация за събитието, което се е случило, можеш да разгледаш обекта за събитието event, който браузърът подава към твоята колбек функция:

var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("Ти кликна " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);

Обектът event има много свойства, пълен списък на които можеш да видиш тук.

Ако променяш поведението при кликване на линк или поведението при изпращане на формуляр, може да ще поискаш да извикаш event.preventDefault() , за да избегнеш поведението по подразбиране на браузъра.

Премахване на слушатели за събития

Ако вече нямаш нужда от слушател , можеш да го премахнеш с функцията на removeEventListener:

var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("Ти кликна " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);
// по - късно...
faceEl.removeEventListener("click", onFaceClick);

Искаш ли да се присъединиш към разговора?

Вписване в профила

Сортирай по:

Все още няма публикации.

Разбираш ли английски? Натисни тук, за да видиш още дискусии в английския сайт на Кан Академия.