Работа с html, текстом и атрибутом value в jquery

Шаг 3: Обратный отсчет

У нас есть значение timeLimit, которое представляет собой начальное время. А также значение timePassed, которое указывает, сколько времени прошло с момента начала отсчета.

Увеличим значение timePassed на секунду и пересчитаем timeLeft с помощью функции setInterval. Для этого реализуем метод startTimer, который будет:

Устанавливать интервал счетчика.
Увеличивать значение timePassed каждую секунду.
Пересчитывать значение timeLeft.
Обновлять значение метки в шаблоне.

Сохраним ссылку на этот объект интервала в переменной timerInterval, чтобы очистить его при необходимости.

let timerInterval = null;

document.getElementById("app").innerHTML = `...`

function startTimer() {
  timerInterval = setInterval(() => {
    
    // Количество времени, которое прошло, увеличивается на  1
    timePassed = timePassed += 1;
    timeLeft = TIME_LIMIT - timePassed;
    
    // Обновляем метку оставшегося времени
    document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft);
  }, 1000);
}

У нас есть метод, который запускает таймер обратного отсчета. С его помощью запустим таймер.

document.getElementById("app").innerHTML = `...`
startTimer();

Теперь таймер отсчитывает время. Реализуем изменение цвета временной метки при различных значениях.

Прекращение всплытия

Всплытие идёт прямо наверх. Обычно событие будет всплывать наверх и наверх, до элемента , а затем до , а иногда даже до , вызывая все обработчики на своём пути.

Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.

Для остановки всплытия нужно вызвать метод .

Например, здесь при клике на кнопку обработчик не сработает:

event.stopImmediatePropagation()

Если у элемента есть несколько обработчиков на одно событие, то даже при прекращении всплытия все они будут выполнены.

То есть, препятствует продвижению события дальше, но на текущем элементе все обработчики отработают.

Для того, чтобы полностью остановить обработку, современные браузеры поддерживают метод . Он не только предотвращает всплытие, но и останавливает обработку событий на текущем элементе.

Не прекращайте всплытие без необходимости!

Всплытие – это удобно. Не прекращайте его без явной нужды, очевидной и архитектурно прозрачной.

Зачастую прекращение всплытия создаёт свои подводные камни, которые потом приходится обходить.

Например:

Мы делаем меню. Оно обрабатывает клики на своих элементах и делает для них . Вроде бы, всё работает.
Позже мы решили отслеживать все клики в окне, для какой-то своей функциональности, к примеру, для статистики – где вообще у нас кликают люди. Например, Яндекс.Метрика так делает, если включить соответствующую опцию.
Над областью, где клики убиваются , статистика работать не будет! Получилась «мёртвая зона».

Проблема в том, что убивает всякую возможность отследить событие сверху, а это бывает нужно для реализации чего-нибудь «эдакого», что к меню отношения совсем не имеет.

setTimeout()

Как мы ранее отметили, setTimeout () выполняет определённый блок кода один раз по истечении заданного времени. Принимает следующие параметры:

Функция для запуска или ссылка на функцию, определённую в другом месте.
Число, представляющее интервал времени в миллисекундах (1000 миллисекунд равняется 1 секунде) ожидания перед выполнением кода. Если вы укажете значение 0 (или просто опустите значение), функция запустится как можно скорее. (См. Примечание ниже о том, почему он запускается «как можно скорее», а не «сразу».) Подробнее о том, почему вы, возможно, захотите сделать это позже.
Значений, представляющие любые параметры, которые вы хотите передать функции при её запуске.

NOTE: Указанное время (или задержка) не является гарантированным временем выполнения, а скорее минимальным временем выполнения. Обратные вызовы, которые вы передаёте этим функциям, не могут выполняться, пока стек в основном потоке не станет пустым.

Как следствие, такой код, как setTimeout (fn, 0), будет выполняться, как только стек будет пуст, а не сразу. Если вы выполните такой код, как setTimeout (fn, 0), но сразу после выполнения цикла, который насчитывает от 1 до 10 миллиардов, ваш колбэк будет выполнен через несколько секунд.

В следующем примере, браузер будет ожидать две секунды перед тем как выполнит анонимную функцию, тогда отобразит сообщение (живой пример, и исходный код):

Указанные вами функции не обязательно должны быть анонимными. Вы можете дать своей функции имя и даже определить её где-нибудь ещё и передать ссылку на функцию в setTimeout (). Следующие две версии фрагмента кода эквивалентны первой:

Это может быть полезно, если у вас есть функция, которую нужно вызывать как по таймауту, так например и в ответ на событие. Но это также может помочь поддерживать ваш код в чистоте, особенно если колбэк тайм-аута занимает больше, чем несколько строк кода.

возвращает значение идентификатора, которое можно использовать для ссылки на тайм-аут позже, например, когда вы хотите его остановить.

Любые параметры, которые вы хотите передать функции, выполняемой внутри setTimeout (), должны быть переданы ей как дополнительные параметры в конце списка.

Например, вы можете реорганизовать предыдущую функцию, чтобы она передавала привет любому имени, переданному ей:

Теперь вы можете передать имя в вызов setTimeout () в качестве третьего параметра:

Наконец, если был создан тайм-аут, вы можете отменить его до истечения указанного времени, вызвав , передав ему идентификатор вызова в качестве параметра. Итак, чтобы отменить указанный выше тайм-аут, вы должны сделать следующее:

Note: См. для более полной демонстрации, которая позволяет вам указать имя для приветствия и отменить приветствие с помощью отдельной кнопки (см. исходный код).

Отмена действия по умолчанию

Часто вам понадобится отменить действие события по умолчанию. Например, вы хотите обработать щелчок по элементу <a> с помощью AJAX, а не вызывать перезагрузку всей страницы. Чтобы добиться этого многие разработчики заставляют обработчик события возвращать false, но тут на деле есть один побочный эффект: он останавливает распространение события, что может иметь непредсказуемые последствия. Правильный способ отменить поведение события по умолчанию это вызвать метод .preventDefault() объекта события.

Это позволяет нам использовать «всплывающие» события, которые мы исследуем ниже.

Устаревшие методы вставки/удаления

Старая школа

Эта информация помогает понять старые скрипты, но не нужна для новой разработки.

Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.

Сейчас уже нет причин их использовать, так как современные методы , , , , , более гибкие и удобные.

Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:

Добавляет в конец дочерних элементов .

Следующий пример добавляет новый в конец :

Вставляет перед в .

Следующий пример вставляет новый элемент перед вторым :

Чтобы вставить в начало, мы можем сделать вот так:

Заменяет на среди дочерних элементов .

Удаляет из (предполагается, что он родитель ).

Этот пример удалит первый из :

Все эти методы возвращают вставленный/удалённый узел. Другими словами, вернёт . Но обычно возвращаемое значение не используют, просто вызывают метод.

Thread

Поток реализует таймер, создав дочерний поток в цикле while, и пользовательский интерфейс может быть обновлен через обработчик. Лично я думаю, что Thread и Timer одинаковы, но выглядят по-разному.

Применимая сцена

Как и в случае с таймером, если многопоточность не считается хорошей, часто возникают проблемы, и одновременно существует несколько потоков с одной и той же функцией.Самый Android имеет ограничение на число дочерних потоков, а приложение запускает несколько потоков одновременно. Это ужасная вещь, поэтому, как и Таймер, вы должны тщательно обдумать его при использовании.

Как изменить или добавить стиль к элементу в jQuery

Установить стиль элементу осуществляется тоже с помощью метода css, но в этом случае используется следующий синтаксис:

// 1 вариант (для установки одного стиля элементу)
.css( propertyName, value )
// 2 вариант (установка значения стиля с помощью функции)
css( propertyName, function )
// 3 вариант (для установки несколько стилей элементу)
css( properties )
// Описание параметров:
// propertyName (тип: String) – имя CSS-свойства
// value (тип: String или Number) – значение, которое нужно установить CSS-свойству
// function – функция, результат выполнения которой будет установлен в качестве значения CSS-свойству
//   Синтаксис функции:
//     Function( Integer index, String value ) => String или Number
//     В качестве аргументов функция получает индекс элемента (index) и текущее окончательное значение CSS-свойства (value)
// properties (тип: объект JavaScript, содержащий ноль или более пар ключ-значение) – объект, состоящий из пар DOM-свойство-значение, которые нужно установить элементу.

При установлении стилей с помощью метода , они задаются ко всем элементам текущего набора.

Например, добавим ко всем элементам серый цвет фона (background):

<div class="info">...</div>
<div class="info">...</div>

<script>
$('.info').css('background', 'grey');
</script>

Если необходимо применить к каждому элементу текущего набора сразу несколько CSS свойств, то в качестве параметра этого метода необходимо использовать объект JavaScript, содержащий пары ‘имяСвойства’ : значение.

.css({'имяСвойства1':значение, 'имяСвойства2':значение,...})

Пример, в котором показано как можно задать несколько CSS-свойств к элементам :

$('.success').css({
  'color':'green',
  'font-size':'16px'
});

В качестве значения строки также можно использовать относительные значения, которые начинаются с или . Первое выражение используется для увеличения текущего значения CSS свойства, а второе — для уменьшения.

Например, увеличим отступ слева и справа у элементов на :

$('.container').css({
  "padding-left": "+=10",
  "padding-right":"+=10"
});

Ещё один способ использования метода css — это применение в качестве 2 параметра функции.

.css('имяСвойства',функция)
// функция: Function( Integer index, String value ) => String или Number

Вариант использования метода css, у которого в качестве второго параметра используется функция обычно находить применение, когда значение необходимо как-то вычислить или определить по какому-то алгоритму.

Например, установим всем элементам , у которых цвет шрифта не равен чёрному, CSS свойство , равное .

$('.text').css('color',function(index,value){
  if (value!=='rgb(0, 0, 0)') {
    return 'red';
  }
});

Например, поменяем значение CSS свойства у всех элементов на странице, находящихся :

$('#content img').css('width','300px');

Особые ссылки для таблиц

У конкретных элементов DOM могут быть свои дополнительные ссылки для большего удобства навигации.

Здесь мы рассмотрим таблицу, так как это важный частный случай и просто для примера.

В списке ниже выделены наиболее полезные:

– ссылки на элементы таблицы , , .
– коллекция элементов таблицы , по спецификации их может быть несколько.

– номер строки в текущей секции
– номер строки в таблице

Пример использования:

Спецификация: HTML5: tabular data.

Даже если эти свойства не нужны вам прямо сейчас, имейте их в виду на будущее, когда понадобится пройтись по таблице.

Конечно же, таблицы – не исключение.

Аналогичные полезные свойства есть у HTML-форм, они позволяют из формы получить все её элементы, а из них – в свою очередь, форму. Мы рассмотрим их позже.

Отображаем часы на странице и останавливаем их, когда они достигнут нуля

Сейчас у нас есть функция, которая возвращает нам оставшиеся дни, часы, минуты и секунды. Мы можем строить наш таймер. Во-первых, создайте следующую html структуру для часов:

<div id="clockdiv"></div>

Затем напишите функцию, которая будет отображать данные внутри нашего div’а:

function initializeClock(id, endtime){  
  var clock = document.getElementById(id);  
  var timeinterval = setInterval(function(){  
   var t = getTimeRemaining(endtime);  
   clock.innerHTML = 'days: ' + t.days + '  
' +  
    'hours: '+ t.hours + '  
' +  
    'minutes: ' + t.minutes + '  
' +  
    'seconds: ' + t.seconds;  
   if(t.total<=){  
    clearInterval(timeinterval);  
   }  
  },1000);  
}

Эта функция принимает два параметра: элемента, который будет содержать наши часы, и конечное время счетчика. Внутри функции мы объявим переменную и будем использовать ее, чтобы хранить ссылку на наш блок с часами, так что нам не нужно запрашивать DOM.

Дальше мы будем использовать , чтобы запускать анонимную функцию каждую секунду, которая будет делать следующее:

Высчитывать оставшееся время
Выводить оставшееся время в наш
Если оставшееся время , останавливать часы

Единственное, что осталось, запустить часы следующим образом:

initializeClock('clockdiv', deadline);

Поздравляю! Теперь у вас есть простой таймер обратного отсчета всего в 18 строк JavaScript кода.

События мыши

Метод	Описание
.click()	Привязывает JavaScript обработчик событий «click» (клик левой кнопкой мыши), или запускает это событие на выбранный элемент.
.contextmenu()	Привязывает JavaScript обработчик событий «contextmenu» (вызов контекстного меню на элементе — клик правой кнопкой мыши), или запускает это событие на выбранный элемент.
.dblclick()	Привязывает JavaScript обработчик событий «dblclick» (двойной клик левой кнопкой мыши), или запускает это событие на выбранный элемент.
.hover()	Связывает один или два обработчика событий для элемента, которые будут выполнены, когда указатель мыши находится на элементе и при его отведении.
.mousedown()	Привязывает JavaScript обработчик событий «mousedown» (нажатие кнопки мыши на элементе), или запускает это событие на выбранный элемент.
.mouseenter()	Привязывает JavaScript обработчик событий «mouseenter» (срабатывает, когда указатель мыши заходит на элемент), или запускает это событие на выбранный элемент.
.mouseleave()	Привязывает JavaScript обработчик событий «mouseleave» (срабатывает, когда указатель мыши выходит из элемента), или запускает это событие на выбранный элемент.
.mousemove()	Привязывает JavaScript обработчик событий «mousemove» (срабатывает, когда указатель мыши перемещается внутри элемента), или запускает это событие на выбранный элемент.
.mouseout()	Привязывает JavaScript обработчик событий «mouseout» (срабатывает, когда указатель мыши покидает элемент), или запускает это событие на выбранный элемент.
.mouseover()	Привязывает JavaScript обработчик событий «mouseover» (срабатывает, когда указатель мыши входит в элемент), или запускает это событие на выбранный элемент.
.mouseup()	Привязывает JavaScript обработчик событий «mouseup» (срабатывает, когда указатель мыши находится над элементом и кнопка мыши отпущена), или запускает это событие на выбранный элемент.

setInterval()

отлично работает, когда вам нужно один раз запустить код по истечении заданного периода времени. Но что происходит, когда вам нужно запускать код снова и снова — например, в случае анимации?

Здесь пригодится setInterval() . Работает очень похоже на setTimeout (), за исключением того, что функция, которую вы передаёте в качестве первого параметра, выполняется повторно не менее чем за количество миллисекунд, заданных вторым параметром. Вы также можете передать любые параметры, необходимые для выполняемой функции, в качестве последующих параметров вызова setInterval ().

Давайте посмотрим на пример. Следующая функция создаёт новый объект , с помощью извлекает из него строку с временем и отображает её в пользовательском интерфейсе. Затем он запускает функцию один раз в секунду с помощью , создавая эффект цифровых часов, которые обновляются раз в секунду ( реальный пример, и исходный код):

Как и , возвращает определённое значение, которое вы можете использовать позже, когда вам нужно очистить интервал.

выполняет задачу постоянно. setInterval () продолжает выполнять задачу вечно, если вы что-то с ней не сделаете. Возможно, вам понадобится способ остановить такие задачи, иначе вы можете получить ошибки, если браузер не сможет выполнить какие-либо другие версии задачи или если анимация, обрабатываемая задачей, завершилась. Вы можете сделать это так же, как останавливаете — передавая идентификатор, возвращаемый вызовом , в функцию :

Активное обучение: Создание собственного секундомера!

Учитывая все вышесказанное, у нас есть для вас задача. Возьмите копию нашего примера , и измените её так, чтобы создать свой собственный простой секундомер.

Вам нужно отображать время, как и раньше, но в этом примере вам нужно:

Кнопка «Start» для запуска секундомера.
Кнопка «Stop» для паузы/остановки.
Кнопка «Reset», чтобы сбросить счётчик времени на .
Дисплей времени, чтобы отображать количество прошедших секунд а не фактическое время.

Несколько подсказок для вас:

Вы можете структурировать и стилизовать разметку кнопок по своему усмотрению; просто убедитесь, что вы используете семантический HTML с кавычками, которые позволяют захватывать ссылки на кнопки с помощью JavaScript.
Вероятно, вы захотите создать переменную, которая начинается с 0, а затем увеличивается на единицу каждую секунду с использованием постоянного цикла.
Этот пример проще создать без использования объекта Date (), как мы это делали в нашей версии, но он будет менее точен — вы не можете гарантировать, что колбэк сработает ровно через 1000 мс. Более точным способом было бы запустить startTime = Date.now (), чтобы получить метку времени, когда пользователь нажал кнопку запуска, а затем выполнить Date.now () — startTime, чтобы получить количество миллисекунд после того, как была нажата кнопка запуска .
Вам также нужно рассчитать количество часов, минут и секунд как отдельные значения, а затем отображать их вместе в строке после каждой итерации цикла. На втором счётчике вы можете отработать каждую из них.
Как вы могли бы их рассчитать? Подумайте об этом:
- В одном часе секунд.
- Количество минут — это количество секунд, оставшееся после вычитания всех часов, разделённое на 60.
- Количество секунд будет количеством секунд, оставшихся после вычитания всех минут.
Вам необходимо включить начальный ноль в отображаемые значения, если сумма меньше , чтобы они больше походили на традиционные часы.
Чтобы приостановить секундомер, вам нужно очистить интервал. Чтобы сбросить его, вам нудно установить счётчик обратно на , очистить интервал, а затем немедленно обновить отображение.
Вероятно, вам следует отключить кнопку запуска после её нажатия один раз и снова включить её после того, как вы остановили / сбросили её. В противном случае многократное нажатие кнопки запуска приведёт к применению нескольких к часам, что приведёт к неправильному поведению.

Note: Если вы застряли, вы можете увидеть нашу версию (см. также исходный код ).

Делегирование событий

Поведение всплывающих событий позволяет нам делать «делегирование событий» — связывание обработчиков с элементами высокого уровня, а затем определение, какие элементы низкого уровня инициировали событие. Так, мы могли бы связать событие с маркированным списком, а затем выяснить, какой элемент инициировал событие:

Конечно, если наш маркированный список содержит пункты, а они в свою очередь содержат другую разметку, при этом мы в действительности заботимся только о нажатом пункте списка, то в суете всё это может оказаться неаккуратным. К счастью, jQuery предоставляет помощника, который позволяет нам определить, о каких элементах нам стоит заботиться, когда идёт привязка к элементу высокого уровня.

Делегирование событий имеет два основных преимущества. Во-первых, это позволяет нам привязывать меньше обработчиков событий, чем если бы мы отслеживали щелчки по отдельным элементам; к тому же это может дать большой прирост производительности. Во-вторых, это позволяет нам привязать родительские элементы вроде маркированного списка и наши обработчики событий будут срабатывать как ожидалось, даже если поменяется содержимое.

Например, этот код добавляет новый элемент списка после настройки делегирования события; щелчок по новому пункт работает прекрасно, без каких-либо дополнительных событий.

Объект-обработчик: handleEvent

Мы можем назначить обработчиком не только функцию, но и объект при помощи . В этом случае, когда происходит событие, вызывается метод объекта .

К примеру:

<button id="elem">Нажми меня</button>

<script>
  elem.addEventListener('click', {
    handleEvent(event) {
      alert(event.type + " на " + event.currentTarget);
    }
  });
</script>

Как видим, если получает объект в качестве обработчика, он вызывает , когда происходит событие.

Мы также можем использовать класс для этого:

<button id="elem">Нажми меня</button>

<script>
  class Menu {
    handleEvent(event) {
      switch(event.type) {
        case 'mousedown':
          elem.innerHTML = "Нажата кнопка мыши";
          break;
        case 'mouseup':
          elem.innerHTML += "...и отжата.";
          break;
      }
    }
  }

*!*
  let menu = new Menu();
  elem.addEventListener('mousedown', menu);
  elem.addEventListener('mouseup', menu);
*!*
</script>

Здесь один и тот же объект обрабатывает оба события

Обратите внимание, мы должны явно назначить оба обработчика через. Тогда объект будет получать события и , но не другие (не назначенные) типы событий

Метод не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий, вот так:

<button id="elem">Нажми меня</button>

<script>
  class Menu {
    handleEvent(event) {
      // mousedown -> onMousedown
      let method = 'on' + event.type.toUpperCase() + event.type.slice(1);
      thismethod(event);
    }

    onMousedown() {
      elem.innerHTML = "Кнопка мыши нажата";
    }

    onMouseup() {
      elem.innerHTML += "...и отжата.";
    }
  }

  let menu = new Menu();
  elem.addEventListener('mousedown', menu);
  elem.addEventListener('mouseup', menu);
</script>

Теперь обработка событий разделена по методам, что упрощает поддержку кода.

Применение делегирования: действия в разметке

Есть и другие применения делегирования.

Например, нам нужно сделать меню с разными кнопками: «Сохранить (save)», «Загрузить (load)», «Поиск (search)» и т.д. И есть объект с соответствующими методами , , … Как их состыковать?

Первое, что может прийти в голову – это найти каждую кнопку и назначить ей свой обработчик среди методов объекта. Но существует более элегантное решение. Мы можем добавить один обработчик для всего меню и атрибуты для каждой кнопки в соответствии с методами, которые они вызывают:

Обработчик считывает содержимое атрибута и выполняет метод. Взгляните на рабочий пример:

Обратите внимание, что метод в строке, отмеченной звёздочкой , привязывается к контексту текущего объекта

Это важно, т.к. иначе внутри него будет ссылаться на DOM-элемент (), а не на объект , и будет не тем, что нам нужно

иначе внутри него будет ссылаться на DOM-элемент (), а не на объект , и будет не тем, что нам нужно.

Так что же даёт нам здесь делегирование?

Не нужно писать код, чтобы присвоить обработчик каждой кнопке. Достаточно просто создать один метод и поместить его в разметку.
Структура HTML становится по-настоящему гибкой. Мы можем добавлять/удалять кнопки в любое время.

Мы также можем использовать классы , , но подход с использованием атрибутов является более семантичным. Их можно использовать и для стилизации в правилах CSS.

Выделение в элементах форм

Элементы форм, такие как и , предоставляют . Так как значения полей представляют собой простой текст, а не HTML, и нам не нужны такие сложные объекты, как и .

Свойства:

– позиция начала выделения (это свойство можно изменять),
– позиция конца выделения (это свойство можно изменять),
– направление выделения, одно из: «forward» (вперёд), «backward» (назад) или «none» (без направления, если, к примеру, выделено с помощью двойного клика мыши).

События:

input.onselect – срабатывает, когда выделение завершено.

Методы:

– выделяет всё содержимое (может быть вместо ),
– изменить выделение, чтобы начиналось с позиции , и заканчивалось , в данном направлении (необязательный параметр).
– заменяет выделенный текст в диапазоне новым.

Если аргументы и указаны, то они задают начало и конец диапазона, иначе используется текущее выделение.

Последний аргумент, , определяет, как будет вести себя выделение после замены текста. Возможные значения:
- – только что вставленный текст будет выделен.
- – диапазон выделения схлопнется прямо перед вставленным текстом (так что курсор окажется непосредственно перед ним).
- – диапазон выделения схлопнется прямо после вставленного текста (курсор окажется сразу после него).
- – пытается сохранить выделение. Значение по умолчанию.

Давайте посмотрим на эти методы в действии.

К примеру, этот код использует событие , чтобы отслеживать выделение:

Заметьте:

срабатывает при выделении чего-либо, но не при снятии выделения.
событие не должно срабатывать при выделении внутри элемента формы в соответствии со , так как оно не является выделением элементов в . Хотя некоторые браузеры генерируют это событие, полагаться на это не стоит.

Мы можем изменять и , устанавливая выделение.

Важный граничный случай – когда и равны друг другу. В этом случае они указывают на позицию курсора. Иными словами, когда ничего не выбрано, выделение схлопнуто на позиции курсора.

Таким образом, задавая и одно и то же значение, мы можем передвигать курсор.

Например:

Чтобы изменять содержимое выделения, мы можем использовать метод . Конечно, мы можем читать и, зная позиции выделения, изменять соответствующую подстроку в , но намного мощнее и, зачастую, удобнее.

Это довольно сложный метод. В простейшем случае он принимает один аргумент, заменяет содержание выделенной области и снимает выделение.

В этом примере выделенный текст будет обёрнут в :

Передавая больше параметров, мы можем устанавливать и .

В этом примере мы найдём в поле ввода, заменим его и оставим заменённый текст выделенным:

Если ничего не выделено, или мы указали одинаковые и в методе , то текст просто вставляется, и ничего не удаляется.

Мы также можем вставить что-нибудь на текущей позиции курсора, используя .

Кнопка в примере вставляет на месте курсора и устанавливает его после вставленного текста. Если какой-то текст был выделен, он будет заменён (мы можем узнать о наличии выделения, проверив и, если выделение есть, сделать что-то ещё):

Пространство имён событий

Одним из преимуществ, которые предлагает .on() — это возможность использовать «пространство имён» событий. Для чего вам требуется задействовать пространство имён? Рассмотрим ситуацию, когда вы привязываете некоторые события, а затем хотите отменить привязку каких-то обработчиков. Как мы это уже видели, вы можете сделать это таким образом:

Внимание! Неудачное решение

Однако это отвяжет все обработчики click для всех элементов, чего нам не хочется. Если вы привяжете обработчик событий с помощью пространства имён событий, то можно задать конкретные обработчики событий:

Данный код оставляет нетронутым click для analytics, в то же время отменяя click для logging.

Мы также можем использовать пространства имен, чтобы инициировать только определённые события:

Привязка нескольких событий за раз

Ещё одним преимуществом .on() является возможность привязывать несколько событий одновременно. Например, вы можете выполнить один код, когда пользователь прокручивает окно или когда пользователь изменяет размеры этого окна. Метод .on() позволяет передавать оба события в виде строки с пробелом — а затем вызвать функцию, которая обработает оба события:

Вывод

Это все, что вам нужно знать о веб-событиях на этом этапе. Как уже упоминалось, события не являются частью основного JavaScript — они определены в веб-интерфейсах браузера (Web API).

Кроме того, важно понимать, что различные контексты, в которых используется JavaScript, обычно имеют разные модели событий — от веб-API до других областей, таких как браузерные WebExtensions и Node.js (серверный JavaScript). Может сейчас вы не особо в этом разбираетесь, но по мере изучения веб-разработки начнёт приходить более ясное понимание тематики

Если у вас возникли вопросы, попробуйте прочесть статью снова или .

Итого

Каждый DOM-узел принадлежит определённому классу. Классы формируют иерархию. Весь набор свойств и методов является результатом наследования.

Главные свойства DOM-узла:

Свойство позволяет узнать тип DOM-узла. Его значение – числовое: для элементов, для текстовых узлов, и т.д. Только для чтения.

Для элементов это свойство возвращает название тега (записывается в верхнем регистре, за исключением XML-режима). Для узлов-неэлементов описывает, что это за узел. Только для чтения.

Внутреннее HTML-содержимое узла-элемента. Можно изменять.

Полный HTML узла-элемента. Запись в не меняет . Вместо этого она заменяет его во внешнем контексте.

Содержимое узла-неэлемента (текст, комментарий). Эти свойства практически одинаковые, обычно мы используем . Можно изменять.

Текст внутри элемента: HTML за вычетом всех . Запись в него помещает текст в элемент, при этом все специальные символы и теги интерпретируются как текст. Можно использовать для защиты от вставки произвольного HTML кода.

Когда значение установлено в , делает то же самое, что и CSS .

В зависимости от своего класса DOM-узлы имеют и другие свойства. Например у элементов () есть свойства , , у элементов () есть и т.д. Большинство стандартных HTML-атрибутов имеют соответствующие свойства DOM.

Впрочем, HTML-атрибуты и свойства DOM не всегда одинаковы, мы увидим это в следующей главе.