Учим Java Script: Продвинутый javascript. События

index.html

<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>События</title>
</head>
<body>

<button>Click</button>
<a href="https://www.google.ru/" target="_blank">Google</a>

<div style="width: 150px; height: 150px; background-color: red" id="big">
<div style="width: 50px; height: 50px; background-color: blue" id="small"></div>
</div>

<script src="index.js"></script>
</body>
</html>

index.js
/* document.querySelector('button').addEventListener('click', function() {
console.log('Clicked'); // в консоль выводится Clicked
}); */

// Функция может в качестве параметра содержать event, в который помещается вся информация про данное событие
/* document.querySelector('button').addEventListener('click', function(event) {
console.log('Clicked', event); // в консоль выводится Clicked click { target: <button>, buttons: 0, clientX: 33, clientY: 20, layerX: 33, layerY: 20 }
}); */

/* document.querySelector('a').addEventListener('click', function(event) {
console.log('Clicked', event); // в консоль выводится Clicked click { target: <a>, buttons: 0, clientX: 92, clientY: 17, layerX: 92, layerY: 17 }
});
*/

// Мы можем изменить стандартное поведение при клике на ссылку
/* document.querySelector('a').addEventListener('click', function(event) {
event.preventDefault();
console.log('Clicked', event); // теперь при клике на ссылку мы никуда не переходим
});
*/

/* document.querySelector('#big').addEventListener('click', function(event) {
console.log('Big click'); // Big click
});

document.querySelector('#small').addEventListener('click', function(event) {
console.log('Small click'); // Small click Big click
}); */

// Изменим очередность кликов с помощью 3-го параметра функции addEventListener
// Обработка события идет на всплытие, а не на погружениее, как это происходит в стандартном варианте
/* document.querySelector('#big').addEventListener('click', function(event) {
console.log('Big click'); // Big click
}, true);

document.querySelector('#small').addEventListener('click', function(event) {
console.log('Small click'); // Big click Small click
}, true); */

// Сделаем так, чтобы при клике по маленькому квадрату большой квадрат на обрабатывался
document.querySelector('#big').addEventListener('click', function(event) {
console.log('Big click'); // Big click
});

document.querySelector('#small').addEventListener('click', function(event) {
console.log('Small click'); // Small click
event.stopPropagation(); // При клике на этот элемент дальше не нужно обрабатывать события
});

/*
event.stopPropagation()
Метод объекта event stopPropagation останавливает "всплытие" вызова события к родительским элементам.

*/

1 комментарий:

Анонимный6 февраля 2022 г. в 13:19
NFL Betting News, Analysis & Picks - Sporting 100
Soccer Betting News & Picks, with full coverage from Sporting 100, Sporting 100, Sporting 100, 토토사이트 Sporting 100, Sporting 100, Sporting 100, Sporting 100, Sporting 100, Sporting
ОтветитьУдалить
Ответы

Добавить комментарий

суббота, 19 августа 2017 г.

Продвинутый javascript. События

1 комментарий:

суббота, 19 августа 2017 г.