Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Современные методы работы со страницей
Проверять на совместимость через https://caniuse.com/ document.body.append(div);- в конец body кидаем div и появиться черный блок document.querySelector('.wrapper').append(div); - для разового использования, div внутри wrapper, в конце wrapper.prepend(div); - в начало wrapper кидаем div hearts[0].before(div); - перед hearts с i = 0 hearts[0].after(div); - после hearts с i = 0 circle[0].remove(); - удаляет со страницы элемент circle i = 0 hearts[0].replaceWith(circle[0]); - элемент hearts[0] заменяю на circle[0] Устаревшие конструкции, но встречаемые: wrapper.appendChild(div); - в конец wrapper кидаем div //где вставляю? что? перед чем? wrapper.insertBefore(div, hearts[0]); - заменили prepend before after //где удалить? что? wrapper.removeChild(hearts[0]) - заменил remove wrapper.replaceChild(circle[0], hearts[0]); - заменил replaceWith Как добавлять HTML элементы или текст в div div.innerHTML = "работает с текстом и с HTML структкрой,запись в кавычках" div.textContent = "только текст, запись в кавычках" Как вставить кусочек HTML тега, перед или после определённых тегов? //над чем махинация какую структуру вставляем? div.insertAdjacentHTML(' спец слово ', '<h1>Hello baby</h1>'); ' спец слово ': afterbegin – в начало. Тег помещается в начало внутри элемента div afterend – после(внизу) элемента div. beforebegin – перед(наверху) элементом div. beforeend – перед концом. Тег помещается в конец внутри элемента div
Не очивидная возможность: Доступ к элемнту можно получить и без document. wrapper = document.querySelector('.wrapper'), // получил элемент wrapper hearts = wrapper.querySelectorAll(".heart"), // говорю что мне нужны элементы oneHearts = wrapper.querySelector(".heart"); // только внутри wrapper а не document
в переменну hearts и oneHearts войду только те элементы, которые подойдут по определённому селектору и находяться внутри элемента wrapper !!! События и их обработчики https://oddler.ru/blog/i63 https://developer.mozilla.org/ru/docs/Web/Events https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener https://developer.mozilla.org/ru/docs/Web/API/Event https://developer.mozilla.org/ru/docs/Web/API/EventTarget/removeEventListener Событиек – сигнал от браузера, что что-то произошло: клик,скрол,наведение мыши, убрать наведение и т.п Обработчик – это функция, которое срабатывает, как только произошло событие Способы назначения обработчика событий: 1) HTML атрибут, который записывается прямо в вёрстке и в этот атрибут можно передать ф-ю прямо из JS, чтобы она выполнилась на страничке (данные метод не используется) Прописывает событие с приставкой on в элементе, необходимо комбинировать кавычки
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>JavaScript</title> <link rel="stylesheet" href="css.css"> </head> <body> <button onclick="alert('Хвала лапупа')" id="btn">Нажми меня</button> <button >Нажми меня</button> <button>Нажми меня</button>
<a href="https://www.youtube.com/">https://www.youtube.com/</a>
<script src="script.js"></script> </body> </html>
При нажатии на первую кнопку выплывает модальное окно
2) Использование свойства DOM дерева для обработчика событий(not use) Нужен элемент куда буду вешать обработчик события const btn = document.querySelector('button'); Устанавливаю тот элемент на который хочу повесить наше событие и использую свойство DOM – дерева, который называется onclik/ В это свойство записываю какое-то значение и сюда идёт функция – которая содержит код, который выполниться после клика, по факту становиться методом Элемент на который вешается событие Событие Действие после события btn.onclick = function () { alert('Лови в бубен') };
У этого свойства есть большой недостаток: const btn = document.querySelector('button'); btn.onclick = function () { alert('Лови в бубен') }; btn.onclick = function () { alert('Лови в бубен2') };
При навешиваниии на один и тотже елемент несколько событий, выполняться будет последнее Из неочивидных минусув – обработчики событий порой одноразовый и после выполнения их необходимо удалить, чтобы пользователь не мог снова взаимдецствовать с элементом, если использовать такой синтаксис, то удалить его нельзя 3).addEventListener() && removeEventListener() Элемент команда событие callback
btn.addEventListener('click', () => { alert('Всё тип-топ'); }); Можно назначать несколько действи на событие const btn = document.querySelector('button');
btn.addEventListener('click', () => { alert('Всё тип-топ'); }); btn.addEventListener('click', () => { alert('Улыбнись (^_^)'); });
Событие в JS выполняется в порядке очереди, как только новое событие поступило, оно добавляется в очередь независимо от других событий
Иногда необходимо получать данные о том элементе с которым мы взаимодействуем. Например: что за событие сейчас произошло или координаты этого элемента.
Для этого есть специальный объект – event,т.е – событие. Как любой объект в JS он может иметь свои свойства. Этот объект события передаётся как первый аргумент в callback функцию, название не играет роли, если в () несколько аргументов, то через, btn.addEventListener('mouseenter', (e) => { console.log(e); });
Объект, который описывает что произошло с элементом
btn.addEventListener('mouseenter', (e) => { console.log(e.target); }); Получаем доступ к элементу btn.addEventListener('mouseenter', (e) => { console.log(e.target); e.target.remove(); - элемент исчезнет со страницы при наведении }); Для delete обработчика событий с элементов есть метод removeEvent Listener() Нужно использовать туже функцию, которую назначали в addEventListener Но если эту же ф-ю прописать в removeEventListener, это не одна и та жа ф-я,что и в addEventListener, поэтому чтобу удалить эту ф-ю нам нужно вынести её в отдельную переменную const deleteElement = (e) => { console.log(e.target); }; ссылаемся на ф-ю, которую выполняем после клика btn.addEventListener('click', deleteElement); - назначаем обработчик события btn.removeEventListener('click', deleteElement); - и тут же нивелируем Как применить? let i = 0; - создал переменную const deleteElement = (e) => { console.log(e.target); i++; if (i == 1) { //после одно нажатия на кнопку обработчик удалиться и btn.removeEventListener('click', deleteElement); // взаимодействовать с ним } // нельзя }; btn.addEventListener('click', deleteElement);
|
||||||||||
|
|
Последнее изменение этой страницы: 2021-07-18; просмотров: 56; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.22.242.141 (0.018 с.) |
при наведении получим:
и теперь открываются огромные возможности, т.к с этим элементом можно что-то сделать: перекрасить, поменять класс, удалить и т.п
