How to use the to make links & open them where you want!

Школа телевидения

КУРСЫ ТАРГЕТИРОВАННОЙ РЕКЛАМЫ (FACEBOOK И ВКОНТАКТЕ)

ПРОГРАММА ОБУЧЕНИЯ:

  1. ТАРГЕТИРОВАННАЯ РЕКЛАМА
    Возможности и особенности таргетированной рекламы. Что не получится продавать через таргет? Таргет во ВКонтакте, Mytarget, Facebook и Instagram. Отличия ведения таргетинга на лендинг/сообщество/сайт. Как определить свою ЦА и где ее искать. Гипотезы и их проверка. Майндкарты и как с ними работать.
  2. ТАРГЕТИНГ В ВК
    Особенности аудитории ВКонтакте. Правила составления рекламного объявления.Что нельзя рекламировать в ВК. Как устроен аукцион и как выбрать ставку. Формата рекламных объявлений: промопосты, боковой таргетинг, рекламная карусель. Видео-реклама в ВК. Работа в рекламном кабинете vk.com, заведение рекламной кампании, отправка ее на модерацию.
  3. FACEBOOK И INSTAGRAM
    Инструменты продвижения в FB. Виды рекламы на площадке. Аналитика Facebook и форматы присутствия. Настройки таргетингов Instagram. Знакомство с рекламным кабинетом. Создание рекламных кампаний в Facebook и Instagram. Разбор успешных кейсов.
  4. РЕТАРГЕТИНГ И ПАРСИНГ
    Возможности и инструменты ретаргетинга. Церебро vs. Target Hunter. Поиск «горячей аудитории» с помощью сервисов парсинга. Логика работы парсеров и их функционал. Установка пикселя в ФБ и ВК, последующая настройка ретаргетинга.
  5. ФИНАНСОВОЕ ПЛАНИРОВАНИЕ И АНАЛИТИКА
    Ключевые метрики в SMM. Утм-метки, Яндекс Метрика и Google-Analytics. Принципы расчета ROI, сервисы для оценки эффективности и формулы расчета рентабельности. Формирование отчетности по площадкам. Оптимизация рекламных кампаний. Пост-клик аналитика и оптимизация по конверсиям. Масштабирование рекламных кампаний.

Как открыть ссылку в новом окне (target blank)

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

Лично я большой сторонник атрибута Target со значением blank, который позволяет открывать страницу в новом окне, оставляя открытой и тот документ, где была проставлена данная ссылка. Не знаю, как это влияет на юзабилити моего блога, но мне этот вариант нравится больше и я его использую практически во всех случаях.

В поисковиках мне тоже нравится настраивать открывание ссылок в новом окне, чтобы выдача всегда была под рукой и всегда можно было бы в нее вернуться. Для этих целей, как уже упомянул, в Html используется специальный атрибут Target, который по умолчанию имеет значение Self:

<a href="https://ktonanovenkogo.ru" target="_self">Откроет документ в этом же окне</a>

Хотя, конечно же, target=»_self» в теге «A» никто не прописывает, ибо это значение используется по умолчанию, а вот если нужно открыть страницу в новом окне, то нужно будет прописать :

<a href="https://ktonanovenkogo.ru" target="_blank">Откроется в новом окне</a>

Обратите внимание, что значения атрибута Target пишутся со знаком подчеркивания вначале (_blank), ибо так оговорено в валидаторе Wc3, содержащем норы языка гипертекстовой разметки. Что примечательно, в Html предусмотрена возможность изменить вариант открытия ссылки принятый по умолчанию

<head>
<base target="_blank">
что-то там еще
</head>

И теперь, если какую-то из ссылок вы захотите открывать в этом же окне, то в ее тег «A» вам уже нужно будет добавить target=»_self», ибо по умолчанию сейчас у вас теперь используется _blank. О, как.

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

Цвета гиперссылок при наведении и переходе — как их поменять

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

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

По умолчанию, в чистом Html (без использования свойств CSS) ссылки выделяются подчеркиванием и могут иметь три варианта цвета:

  1. Синий — цвет для неотработанных ссылок, по которым пользователь еще не кликал
  2. Красный — его принимает гиперссылка сразу после щелчка по ней и до тех пор, пока запрошенный документ не будет загружен в браузер пользователя по сети (в современных условиях уловить этот момент бывает совсем не просто и всему виной повсеместно возросшая скорость интернета)
  3. Пурпурный — цвет для отработанных линков, по которым уже прошелся пользователь

В Html 4.01 эти цвета для ссылок приняты по умолчанию, но их можно изменить при помощи специальных атрибутов, которые прописываются в тег Body, который вы сможете найти в одном из файлов используемого вами шаблона. Для изменения всех трех цветов используются, соответственно, три атрибута:

  1. Link — задается цвет не посещенной ссылки
  2. Alink — цвет активной в данный момент, которая отрабатывается браузером
  3. Vlink — цвет уже посещенной пользователем гиперссылки

Помните, я уже писал о том, как задаются цвета в коде. В соответствии с этим упомянутые атрибуты могут выглядеть так:

<body link="#0000ee" alink="#ee0000" vlink="#800080">

Естественно, что здесь имелся в виду вариант чистого Html, когда по каким-либо причинам не удобно или не возможно использовать стилевое оформление, в противном случае все эти цвета можно будет легко задать и поменять с помощью CSS свойства Color.

Создание простого слайд-шоу при помощи CSS

Разработчики придумали тонны приложений с использованием псевдокласса : target. Этот псевдоселектор может пригодится при создании табов, или даже слайд-шоу. Давайте посмотрим, как можно реализовать последнее.

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

Теперь добавим наши стили:

Сначала добавим float: left всем элементам нашего списка. Мы использовали для элементов абсолютное и относительное позиционирование.

Далее, установим z-index: -1 для всех изображений, а затем установите z-index: 1 для целевых изображений. Это приведёт к тому, что когда вы нажимаете на элемент списка, изображение изменяется. Чтобы сделать переход более плавным, мы установим значение непрозрачность для других изображений  .

Смотрите демонстрацию слайд-шоу на чистом CSS здесь.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Школа SMM Дамира Халилова

Бесплатный онлайн мастер-класс «Как эффективно организовать поток клиентов через таргетированную рекламу?»

Программа вебинара:

  1. Пошаговый план настройки таргетированной рекламы с нуля
  2. Какие элементы обеспечивают максимальные продажи в соц сетях?
  3. Как увеличить эффективность показов объявлений при помощи парсинга?
  4. Как работать с автоворонками в мессенджерах?
  5. Тренды 2020 года в таргетированной рекламе
  6. Как получить первых клиентов и стать высокооплачиваемым таргетологом?

Бонус в конце вебинара:

  • Чек-лист “30 удачных идей для оформления рекламных объявлений”
  • Чек-лист по поиску проектов и работы

Значения target

Четыре наиболее распространенных значения атрибута target:

_self

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

Единственная ситуация, в которой это может произойти, если в HTML использован тег <base>, который устанавливает определенный способ открытия для всех ссылок. Например, если между тегами <head> добавлен следующий код <base href=»http://www.ltconsulting.co.uk» target=»_blank»/>, нужно использовать target=»_self», чтобы ссылка открывалась в том же окне.

_blank

Открывает ссылку в новой вкладке или окне. Это определяется локальными настройками пользователя, в большинстве браузеров это новая вкладка. Вы можете подумать, что с помощью данного значения можно реализовать всплывающие рекламные блоки. Но это не так. Чаще всего для этого используется JavaScript, а не HTML.

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

_parent

Значение _parent открывает ссылку в родительском фрейме для фрейма, в котором вы находитесь. Это не популярное значение, так как теги для создания фреймов <frameset> и <frame> не поддерживаются в HTML5. Тем не менее, это значение по-прежнему можно использовать внутри тегов <iframe>.

_top

Как и _parent, значение _top относится к фреймам. С помощью <frameset> можно создать фреймы внутри фреймов с многоуровневой иерархией. _top отменяет все установленные фреймы и загружает страницу в отдельное окно браузера.

framename

Открывает ссылку во фрейме с именем, указанным в значении атрибута HTML href target. Например, <a href=»http://ltconsulting.co.uk» target=»frame1″> открывается во фрейме с именем frame1, то есть <frame src=»https://www.internet-technologies.ru/wp-content/uploads/sidebar» name=»frame1″>. iframe также поддерживают это значение атрибута. Но вряд ли вы когда-нибудь столкнетесь с такими вариантами использования. Когда framename выбирается пользователем, это имя может начинаться только с буквы, а не с цифры или другого символа.

Символ подчёркивания

Теперь разберемся, для чего используется символ нижнего подчеркивания. Если мы уберем подчеркивание и изменим значение атрибута на target=»blank», то ссылка будет открываться в новом окне независимо от подчеркивания. Чтобы убедиться в этом, создайте новый HTML-документ и разместите на нем код следующей ссылки:

<a href="http://ltconsulting.co.uk" target="blank">ltconsulting.co.uk</a>

Затем добавьте в документ код следующей ссылки. А теперь при открытой вкладке с первой ссылкой откройте вторую с атрибутом HTML target blank:

Код второй ссылки:

<a href="http://ltconsulting.co.uk/contact-us/" target="blank">ltconsulting.co.uk/contact-us</a>

Вы увидите, что вторая ссылка открылась во вкладке, которая была открыта для предыдущей ссылки, а не в новой (собственной вкладке).

Это связано со значением framename, которое мы рассматривали ранее. Поскольку мы начали значение с буквы, “blank” интерпретируется как значение типа framename. В случае если framename указан в качестве цели, но такой фрейм не существует, новая вкладка или окно будет создано с использованием этого имени. Таким образом, новое окно, которое мы открыли ранее, стало фреймом с именем “blank”.

Чтобы избежать этой проблемы, для ключевых слов значений было добавлено нижнее подчеркивание. Вот откуда взялось _blank.

Данная публикация является переводом статьи «TARGET=“_BLANK” AND THE TARGET VALUES OF THE» , подготовленная редакцией проекта.

a target=”_blank” Open in New Browser Tab (or Window)

The attribute specifies where the linked document will open when the link is clicked. The default is the current window. If , the linked document will open in a new tab or (on older browsers) a new window.

Why Open in a New Browser?

The most common reason to use `target=”_blank” is so that offsite links open in a separate tab. This allows a user to click on a reference and come back to it later without leaving the current page. It keeps visitors on your site longer and improves most of your metrics: bounce rate, conversion, pages visited.

Open All External Links in a New Tab with JavaScript

You don’t need to manually add to every link on your site. If you link out a lot (which you should do), it is easy to add some JavaScript code to your site and turn all external links into links automatically.

(You can see a slightly modified form of this code in action on every page of this website.) This trick requires jQuery, but there is a good chance you are using it already. It is used in the most popular frameworks and content management systems, including WordPress, Drupal, and Twitter Bootstrap. If you need to do it without jQuery, that can be done as well. Here is a “plain JavaScript” version:

Besides making it easier, this cleans up your markup considerably.

Reasons not to use `target=”_blank”

Some people argue that users do not prefer to open links in a new browsing context. They think that doing so is similar to popup ads and other annoying behavior. With the rise of tabbed browsing, this argument has largely gone away. Most users prefer to open links in a new tab, because it allows them to come queue referenced links for later reading without losing their current browsing context.

Values of the Attribute

Value Name Notes
_blank Opens the linked document in a new tab or window.
_parent Opens the link in the parent frame. Frames are deprecated in HTML5.
_self Open the link in the current frame.
_top Opens the link in the top-most frame. Frames are deprecated in HTML5.
frame name Opens the link in the named frame. Frames are deprecated in HTML5.

All Attributes of the Element

Attribute name Values Notes
hreflang Specifies the language of the linked resource.
download Directs the browser to download the linked resource rather than opening it.
target _blank _parent _self _top frame name Specifies the context in which the linked resource will open.
title text Defines the title of a link, which appears to the user as a tooltip.
href url Specifies the linked document, resource, or location.
name

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template
-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text
-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

CSS

Следующий код CSS позволяет добиться нужного эффекта, с помощью которого выделяется блок с соответствующим идентификатором (появляется тень вокруг прямоугольника).

/* Добавляем немного пространства */
ul, div
{
    margin-bottom: 10px;
}

/* Cтиль блока по умолчанию */
div
{
    padding: 10px;
    border: 1px solid #eaeaea;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* Изменяем вид вывода при соответствии */
div:target
{
    border-color: #9c9c9c;
    -moz-box-shadow: 0 0 4px #9c9c9c;
    -webkit-box-shadow: 0 0 4px #9c9c9c;
    box-shadow: 0 0 4px #9c9c9c;
}

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

Другие полезные атрибуты анкора

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

Укажите язык целевого анкора: hreflang

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

Чтобы сообщить браузеру, что <a href="http://example.com" hreflang="es">ссылка</a>
 ведет на ресурс на другом языке, можно использовать атрибут 
<code> hreflang </ code>.

Атрибут rel

Атрибут rel используется для описания отношений между анкором и целевым источником. Например:

Эта статья была написана <a href="https://plus.google.com/+AuthorName"
rel="author">Отличным автором</a>.

Существует несколько значений, которые принимает атрибут rel:

  • rel=»nofollow»: используйте это значение, если ссылаетесь на ресурс, но не хотите передавать ему ссылочный вес своего сайта. Например, если ссылаетесь на спамовый сайт в качестве примера того, чего не нужно делать.
  • rel=»alternate»: если сайт имеет больше одной версии, используйте это значение для идентификации связанного ресурса в качестве альтернативной версии текущей страницы.
  • rel=»bookmark»: это значение используется для определения URL-адреса, который является постоянным и может использоваться для закладки.
  • rel=»help»: идентифицирует связанный ресурс как файл справки для страницы с этим значением.
  • rel=»license»: используйте этот атрибут для ссылки на лицензию авторских прав.
  • rel=»next»: используйте это значение для ссылки на следующий документ из серии.
  • rel=»prev»: используйте это значение для ссылки на предыдущий документ из серии.
  • rel=»noreferrer»: если хотите разместить ссылку на внешний сайт, но не хотите, чтобы целевой источник знал, кто на него ссылается, используйте это значение.

Атрибут type

Необязательный атрибут type используется для идентификации типа интернет-носителя или MIME типа целевого документа. Например, при создании ссылки на сайт можно добавить атрибут type=»text/html», чтобы сообщить браузеру, что ссылка указывает на HTML-документ.

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

Значение type должно быть допустимым типом IANA. Некоторые из наиболее часто используемых значений: text/html, text/css, application/javascript и multipart/form-data.

Навигация

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

Связанные элементы

Название элемента Атрибуты Примечания
link href rel media title type Элемент <link> используется для определения отношения между HTML-документом и внешним ресурсом. Он чаще всего применяется для определения взаимосвязи между документом и внешними таблицами стилей CSS.
anchor hreflang download target title href name Элемент <a> используется для создания гиперссылки на другую веб-страницу или другое место на той же веб-странице.
base target href Элемент <base> используется для определения базового адреса, от которого можно создать все относительные URL, отображаемые на веб-странице. Если <base> имеет атрибут target, атрибут target, то он будет использоваться как атрибут по умолчанию для всех гиперссылок, отображаемых в документе.

Данная публикация является переводом статьи «Anchors & Links: How They Work In HTML» , подготовленная редакцией проекта.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript свойства target и currentTarget объекта Event</title>
	</head>
	<body>
		<div>
		    <span>Элемент спан</span>	
		    <p>Параграф</p>		
		    <button>Кнопка</button>
		</div>
		<script>
	const div = document.querySelector( "div" ), // находим первый элемент <div> в документе
	div.addEventListener("click", showTargets); // регистрируем обработчик события "click" для элемента <div>

	function showTargets( event ) {
	  console.log( "div currentTarget", event.currentTarget); // выводим в консоль значение свойства currentTarget
	  console.log( "div target", event.target); // выводим в консоль значение свойства target
	}
		</script>
	</body>
</html>

В этом примере мы с использованием метода querySelector() выбрали первый HTML элемент <div> в документе. С помощью метода addEventListener() зарегестриовали обработчики события «click» (нажатие левой кнопкой мыши на элементе) для этого элемента.

При возникновении этого события срабатывает функция, которая выводит в консоль значение свойства currentTarget, которое соответствует текущему элементу DOM, в котором в настоящий момент обрабатывается событие и свойства target, которое ссылается на объект, который отправил событие.

Обратите внимание, что значения свойств будут отличаться, currentTarget всегда будет содержать элемент , так как именно он вызвал событие (обработчик события сработал именно на этом элементе), а target будет содержать ссылку на конкретный элемент внутри элемента (элемент, который инициировал событие). Результат нашего примера:

Результат нашего примера:


Пример использования JavaScript свойства target и currentTarget объекта EventJavaScript Event

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий