Зробимо так, що при натисканні на елемент з атрибутом btn буде ховатися/показуватися елемент із заданим id,одночасно при натисканні на будь-якому елементі сторінки повинен змінюватися випадковим чином колір цього елемента:
Розмітка виглядає так:
Пишемо скрипт, спочатку перший обробник кліка. Потім другий обробник кліка:
Отже в коді вище ми включаємо об'єкт події event у функцію, а функції — налаштування стилю фону для event.target, який є кнопкою, текстовим полем, самою сторінкою (той елемент, на якому натискаємо). Властивість об'єкта події target завжди є посиланням на елемент, з яким щойно відбулася подія. Тому в цьому прикладі ми встановлюємо випадковий колір фону на кнопці, полі, на сторінці по черзі.
Результат:
Основні переваги цього механізму полягають у тому, що при необхідності можна видалити код обробника подій, використовуючи removeEventListener(), і так само можна додати кілька слухачів того ж типу до елементів.
Розглянемо приклад. На сторінці кілька div-ів та три кнопки. При кліку на будь-якому з div-ів заливка змінює колір на бузковий, при натисканні на кнопки її колір змінюється на червоний і в нижньому розділі з'являється відповідна картинка.
Має вийти: Може виникнути плутанина, коли код, який відповідає за прослуховування та обробку подій, робить не те, що потрібно, так
як ви випадково вказали true замість false або навпаки у виклик addEventListener.
Щоб у цьому випадку все працювало як задумано, потрібно в обробниках кнопок зупинити подію під час занурення.
обробник якого робить бузкову заливку. Зупинимо для першої кнопки, отримали коректну обробку, червона кнопка.
Решта поки що бузкові.
Зробимо те саме і для них.
Підказка:
let td1 = tr1[row.value].getElementsByTagName('td');
td1[col.value].innerHTML = value;
Розмітка:
<!DOCTYPE html>
<html>
<head>
<title>Events</title>
<style>
.item { background: yellow; font-size: 40pt; }
div { border: ridge 3px lime; padding: 10px; margin: 10px; }
#one_a { background: orange; }
#one_b { background: white; }
#two { background: cyan; }
#three_a { background: pink; }
#buttonOne { background: lime; color: white; }
#buttonTwo { background: blue; color: white; }
#buttonThree { background: green; color: white; }
#three_b { background: lightgray; }
img { width: 100px; height: 100px; }
</style>
</head>
<body id="theBody" class="item">
<div id="one_a" class="item">
<div id="two" class="item">
<div id="three_a" class="item">
<button id="buttonOne" class="item">one</button>
</div>
<div id="three_b" class="item">
<button id="buttonTwo" class="item">two</button>
<button id="buttonThree" class="item">three</button>
</div>
</div>
<div id="one_b" class="item">
</div>
</div>
Скрипт:
<script>
const item = document.querySelector('.item');
let elem = document.querySelector('#one_b');
function Inform(e){
console.log('Фаза: ' + e.eventPhase);
console.log('Элемент, для которого запущен обработчик: ' + e.currentTarget.tagName.toLowerCase());
console.log('Элемент, который инициировал событие click: ' + e.target.tagName.toLowerCase());
}
item.addEventListener('click', function (e) {
e.target.style.backgroundColor = "violet";
Inform(e);
}, true);
let oneb = document.querySelector("#buttonOne");
oneb.addEventListener('click', fun1, false);
let twob = document.querySelector("#buttonTwo");
twob.addEventListener('click', fun2, false);
let threeb = document.querySelector("#buttonThree");
threeb.addEventListener('click', fun3, false);
function fun1(e){
e.target.style.backgroundColor = "red";
elem.style.backgroundColor = "white";
Inform(e);
if(e.eventPhase == 2){
let p = document.createElement('span');
p.innerHTML = "<img src='heart.gif' />";
elem.append(p);
console.log('Цель!!! Первая кнопка.');
}
}
function fun2(e){
e.target.style.backgroundColor = "red";
elem.style.backgroundColor = "white";
Inform(e);
if(e.eventPhase == 2){
let p = document.createElement('span');
p.innerHTML = "<img src='3.png' />";
elem.append(p);
console.log('Цель. Вторая кнопка!');
}
}
function fun3(e){
e.target.style.backgroundColor = "red";
elem.style.backgroundColor = "white";
Inform(e);
if(e.eventPhase == 2){
let p = document.createElement('span');
p.innerHTML = "<img src='115.gif' />";
elem.append(p);
console.log('Цель. Третья кнопка!');
}
}
</script>
Скрипт:
Результат:
Завдання на урок
Help me!!!
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Вкладені DIV-и з віршем Ліни Костенко</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(145deg, #6aa9ff, #3c7dff);
padding: 20px;
color: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0;
}
h1 {
text-shadow: 2px 2px 4px #000;
margin-bottom: 15px;
}
textarea {
width: 80%;
max-width: 600px;
padding: 10px;
border-radius: 10px;
border: 3px solid white;
font-size: 18px;
margin-bottom: 20px;
}
button {
padding: 8px 20px;
font-size: 18px;
background: #ffdf60;
border-radius: 8px;
border: none;
cursor: pointer;
margin-bottom: 25px;
}
.container {
position: relative;
width:700px;
height:700px;
display: flex;
justify-content: center;
align-items: center;
}
.box {
position: absolute;
border: 3px solid black;
display: flex;
justify-content: center;
cursor: pointer;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.clicked {
background: yellow !important;
border-color: orange !important;
}
.line-text {
opacity: 0;
font-weight: bold;
font-size: 16px;
color: black;
text-shadow: 1px 1px 2px white;
text-align: center;
padding: 5px;
word-wrap: break-word;
max-width: 90%;
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
}
.line-text.show {
opacity: 1;
}
.lvl1 { width: 640px; height: 640px; background: rgba(255,0,0,0.3); }
.lvl2 { width: 580px; height: 580px; background: rgba(0,255,0,0.3); }
.lvl3 { width: 520px; height: 520px; background: rgba(0,0,255,0.3); }
.lvl4 { width: 460px; height: 460px; background: rgba(255,255,0,0.3); }
.lvl5 { width: 300px; height: 300px; background: rgba(255,0,255,0.3); }
.lvl6 { width: 140px; height: 140px; background: rgba(0,255,255,0.3); }
</style>
</head>
<body>
<h1><h3><a href="18_3.html">Повернутися!!!</a></h3></h1>
<textarea id="poem" rows="6">І все на світі треба пережити.
І кожен фініш – це, по суті, старт.
І наперед не треба ворожити,
І за минулим плакати не варт.</textarea><br>
<button id="clearBtn">Очистити</button>
<div class="container">
<div class="box lvl1" data-line="0">
<div class="line-text"></div>
</div>
<div class="box lvl2" data-line="1">
<div class="line-text"></div>
</div>
<div class="box lvl3" data-line="2">
<div class="line-text"></div>
</div>
<div class="box lvl4" data-line="3">
<div class="line-text"></div>
</div>
<div class="box lvl5" data-line="author">
<div class="line-text"></div>
</div>
<div class="box lvl6" data-line="-1">
<div class="line-text"></div>
</div>
</div>
Варіанти
1
2
3
4
5
6
7
8
9
10
A1
B1
C1
A2
B2
C2
A3
B3
C3
Введіть дані для оновлення комірки
Рядок:
Стовпець:
Значення:
