Jquery метод .click()

Смысл return false из обработчика

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

function handler(event) {
  ...
  return false
}

function handler(event) {
  ...
  if (event.preventDefault) {
    event.preventDefault() 
  } else {
    event.returnValue = false
  }
}

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

elem = document.getElementById('TestStop')

function handler(e) {
  e.preventDefault() // браузер - стоять
  e.stopPropagation() // событие - не всплывать
  return false // и вообще, мне больше ничего не надо
}

elem.addEventListener('click', handler, false)

// следующий обработчик все равно сработает
elem.addEventListener('click', function() { alert('А я сработало..') }, false);

Проверить:

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

Поэтому тем более один обработчик никак не может влиять на другие того же типа на том же элементе.

Обработчик события в виде именованной функции

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

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

JavaScript

var img = document.querySelector(«.round img»),
close = document.getElementById(«close»);

function removeBlock() {
this.parentNode.remove();
console.log(this.parentNode)
}
close.onclick = removeBlock;
img.onclick = removeBlock;

1 2 3 4 5 6 7 8 9

varimg=document.querySelector(«.round img»), close=document.getElementById(«close»); functionremoveBlock(){ this.parentNode.remove(); console.log(this.parentNode) } close.onclick=removeBlock; img.onclick=removeBlock;

  в этом коде выведет в консоль браузера, какой из блоков был удален.

Сам пример:

×
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod distinctio repudiandae accusantium excepturi nostrum nemo earum maiores aliquid quia eius.

Обратите внимание, что в коде выше при вызове функции круглые скобки не нужны

Отмена обработчика события

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

JavaScript

close.onclick = null;

1	close.onclick=null;

Обработка событий на нескольких DOM элементах

Как использовать обработчик событий addEventListener, когда нам требуется использовать его сразу на нескольких
элементах?

Предположим, на нашей странице есть 5 кнопок с классом «btn»:

1<div class="wrapper">

2<button class="btn">Click1<button>

3<button class="btn">Click2<button>

4<button class="btn">Click3<button>

5<button class="btn">Click4<button>

6<button class="btn">Click5<button>

7<div>

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

Подход 1. Используем отдельный addEventListener для каждой кнопки

Здесь мы можем выделить все кнопки с одинаковым классом и присвоить их переменной buttons.
Далее нам потребуется использовать цикл forEach, чтобы пробежаться по каждой кнопке в полученном списке,
и повесить на нее обработчик событий addEventListener.

1const buttons =document.querySelectorAll('.btn');

2

3functionhandleClick(){

4console.log('click');

5}

6

7buttons.forEach((button)=>{

8  button.addEventListener('click', handleClick);

9});

Подход 2. Делегирование события (Event delegation)

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

То есть, мы можем повесить обработчик событий на родительский div с классом «wrapper»,
и обрабатывать события, которые активируются на дочерних элементах button.

Это возможно благодаря механизму, который называется «всплытие» (bubbling) в Javascript,
который означает, что если событие срабатывает на каком-то элементе, оно также срабатывает на всех его родительских элементах.

Внутри нашей коллбэк функции у нас есть доступ к объекту «Событие» (Event), внутри которого мы можем использовать свойство target,
чтобы получить элемент, на который мы кликнули.

1const wrapper =document.querySelector('.wrapper');

2

3functionhandleClick(e){

4console.log('click', e.target);

5

6

7

8}

9

10wrapper.addEventListener('click', handleClick);

Обработчики событий

Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.

Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.

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

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

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

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

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

Атрибут HTML-тега – не самое удобное место для написания большого количества кода, поэтому лучше создать отдельную JavaScript-функцию и вызвать её там.

Следующий пример по клику запускает функцию :

Как мы помним, атрибут HTML-тега не чувствителен к регистру, поэтому будет работать так же, как и … Но, как правило, атрибуты пишут в нижнем регистре: .

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

К примеру, :

Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство.

Этот способ, по сути, аналогичен предыдущему.

Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.

Эти два примера кода работают одинаково:

1. Только HTML:

2. HTML + JS:

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

В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:

Кстати, обработчиком можно назначить и уже существующую функцию:

Убрать обработчик можно назначением .

Для каких элементов можно использовать атрибут onclick в HTML?

Синтаксис написание этого атрибута выглядит так:

XHTML

<input type=»button» onclick=»alert(‘Привет! Вот так работает этот скрипт’)» value=»Нажми на меня!»/>

1	<input type=»button»onclick=»alert(‘Привет! Вот так работает этот скрипт’)»value=»Нажми на меня!»/>

Давайте разберём что же означает набор этих странных символов.

В данном примере мы задаём атрибут onclick для кнопки button. Чтобы браузер понял что нам нужна именно кнопка мы указываем тип type=»button». Далее в этом атрибуте мы пишем javascript код.

В данном случае мы вызываем модальное окно и выводим в нём текст при помощи метода alert():

XHTML

onclick=»alert(‘Привет! Вот так работает этот скрипт’)»

1	onclick=»alert(‘Привет! Вот так работает этот скрипт’)»

В скобках в кавычках указываем текст, который нужно вывести.

И последнее задаём текст, который будет написан на кнопке при помощи value=»Нажми на меня!»

А вот так будет выглядеть это чудо в действии:

Кроме кнопок атрибут onclick можно применять к ссылкам и к любым другим тегам HTML, НО там есть свои особенности, о которых поговорим ниже.

Обработчик события как атрибут элемента

Это самый старый способ назначения обработчиков события и наименее используемый на данный момент. Для того чтобы его добавить, необходимо к имени события добавить приставку «on» и записать примерно такой код:

Обработчик события как атрибут

JavaScript

<button onclick=’alert(«Событие произошло!»)’>Нажми меня</button>

1	<button onclick=’alert(«Событие произошло!»)’>Нажмименя<button>

Нажми меня

Можно вызвать функцию, в которую можно передать один или несколько аргументов:

Обработчик события как атрибут элемента

JavaScript

<script>
function change(element, color){
element.style.backgroundColor = color;
}
</script>
<p onclick=»change(this, ‘red’)»>Кликни здесь, и этот абзац станет красным.
Но только один раз.</p>
<p onclick=»change(this, ‘lime’)»>Кликни здесь, и этот абзац станет зеленым.
Но только один раз.</p>

1 2 3 4 5 6 7 8 9

<script> functionchange(element,color){ element.style.backgroundColor=color; } </script> <ponclick=»change(this, ‘red’)»>Кликниздесь,иэтотабзацстанеткрасным. Нотолькоодинраз.<p> <ponclick=»change(this, ‘lime’)»>Кликниздесь,иэтотабзацстанетзеленым. Нотолькоодинраз.<p>

Пример этого кода:

Кликни здесь, и этот абзац станет красным. Но только один раз.

Кликни здесь, и этот абзац станет зеленым. Но только один раз.

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

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

Событие загрузки

Когда завершается загрузка страницы, для объектов тела документа и окна возникает JavaScript event «load». Оно используется для планирования инициализации действий, для которых требуется загрузка всего документа. Не забывайте, что содержимое <script> запускается сразу, когда встречается этот тег. Иногда это слишком рано. Например, когда скрипт должен сделать что-то с частями документа, которые загружаются после тега <script>.

<img> и теги скриптов, которые загружают внешние файлы, также содержат событие «load«. Оно указывает, что файл, который был связан с ними, загружен. Как и события фокуса ввода, события загрузки не распространяются.

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

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

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

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

К примеру:

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

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

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

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

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

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

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

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

Для большинства типов событий обработчики JavaScript event вызываются до выполнения действий по умолчанию. Если не нужно, чтобы выполнялось поведение по умолчанию, нужно вызвать для объекта события метод preventDefault.

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

<a href="https://developer.mozilla.org/">MDN</a>
<script>
  var link = document.querySelector("a");
  link.addEventListener("click", function(event) {
    console.log("Nope.");
    event.preventDefault();
  });
</script>

Старайтесь не делать так, если у вас нет на это веских причин.

В зависимости от браузера некоторые события не могут быть перехвачены. В Google Chrome, например, сочетание клавиш (event keycode JavaScript) для закрытия текущей вкладки (Ctrl-W или Command-W) не может быть обработано с помощью JavaScript.

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sinh()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
Modifiers:
g
i
m
Groups:

(x|y)
Metacharacters:
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx
Quantifiers:
+
*
?
{X}
{X,Y}
{X,}
$
^
?=
?!
Properties:
constructor
global
ignoreCase
lastIndex
multiline
source
Methods:
compile()
exec()
test()
toString()

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

JavaScript onclick

The JavaScript onclick event executes a function when you click on a button or another web element. For instance, an onclick event can trigger a dialog box to appear when you clock on a button.

Here is the syntax for the onclick method in HTML:

<button onclick="codetorun">Click me</button>

When this HTML button is clicked, the “codetorun” JavaScript function will execute. We can use onclick with other elements, like a div. onclick is not exclusive to buttons.

You can also use onclick in plain JavaScript. Here is an example of a JavaScript onclick method:

var item = document.getElementById("button");
item.onclick = function() {
	codetoexecute...
}

We use the JavaScript getElementById method to retrieve an element from our web page. When we click on the element with the ID “button” our onclick function will execute.

Дробление

Некоторые типы событий могут запускаться много раз в течение короткого периода времени (например, «mousemove» и javascript scroll event). При обработке таких событий, нужно быть осторожным, чтобы это не происходило очень долго, иначе обработчик будет выполнять действие столько времени, что взаимодействие с документом станет медленным и скачкообразным.

Если нужно сделать что-то нестандартное в таком обработчике, можно использовать setTimeout, чтобы быть уверенными, что это не растянется слишком надолго. Это обычно называют дроблением события. Существует несколько отличающихся друг от друга подходов к дроблению.

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

<textarea>Напечатайте что-нибудь здесь...</textarea>
<script>
  var textarea = document.querySelector("textarea");
  var timeout;
  textarea.addEventListener("keydown", function() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      console.log("Вы перестали печатать.");
    }, 500);
  });
</script>

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

Можно использовать иной сценарий, если нужно разделить ответы небольшим промежутком времени. Но чтобы при этом они запускались во время серии событий, а не только после нее. Например, можно отправлять в ответ на события «mousemove» (JavaScript mouse events) текущие координаты мыши, но только через каждые 250 миллисекунд:

<script>
  function displayCoords(event) {
    document.body.textContent =
      "мышь находится в точке " + event.pageX + ", " + event.pageY;
  }

  var scheduled = false, lastEvent;
  addEventListener("mousemove", function(event) {
    lastEvent = event;
    if (!scheduled) {
      scheduled = true;
      setTimeout(function() {
        scheduled = false;
        displayCoords(lastEvent);
      }, 250);
    }
  });
</script>

addEventListener

Фундаментальный недостаток описанных выше способов назначения обработчика – невозможность повесить несколько обработчиков на одно событие.

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

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

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

Синтаксис добавления обработчика:

Имя события, например .

Ссылка на функцию-обработчик.

Дополнительный объект со свойствами:

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

Для удаления обработчика следует использовать :

Удаление требует именно ту же функцию

Для удаления нужно передать именно ту функцию-обработчик которая была назначена.

Вот так не сработает:

Обработчик не будет удалён, т.к

в передана не та же функция, а другая, с одинаковым кодом, но это не важно

Вот так правильно:

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

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

Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через . Однако, во избежание путаницы, рекомендуется выбрать один способ.

Обработчики некоторых событий можно назначать только через

Существуют события, которые нельзя назначить через DOM-свойство, но можно через .

Например, таково событие , которое срабатывает, когда завершена загрузка и построение DOM документа.

Так что более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило.

Button onclick JavaScript Example

Let’s say you want to change some text on a web page after you click on a p element, or a paragraph. We can use the onclick attribute to implement this feature on a website. Let’s start with an HTML page with a button and some text. We’ll also create a JavaScript file that will hold our event code.

index.html

<!DOCTYPE html>
<html>

<head>
	<title>onclick example</title>
</head>
<!-- Main body of code -->
<body>
	<button>Click here.</button>

	<p>This text will change when you click the button.</p>
</body>

<!-- Reference our JavaScript event code -->
<script src=”js/onclick.js”></script>

</html>

This is an example of a basic web page, but it’s not interactive yet. When this web page runs, we’ll see a button and some text, but nothing will happen when we click our button. That’s because we haven’t implemented the onclick script function yet.

Now that our web page is ready, we can start to create our onclick event. We first need to add the onclick() event listener to our button. This event will listen for when the user clicks on the button.

index.html

...
<body>
	<button onclick=”changeParagraph()”>Click here.</button>

	<p>This text will change when you click the button.</p>
</body>
…

Let’s create our “onclick.js” file, which will hold the code for our changeParagraph() event. This event will change the text of our paragraph (the “p” element) with something else.

onclick.js

const changeParagraph = () => {
	const paragraph = document.querySelector(“p”);
	paragraph.textContent = “This text has changed because you clicked the button.”
}

We have defined a JavaScript function called changeParagraph. We use the JavaScript querySelector method to select a paragraph on our page. When we first load the page, we’ll see our button and text that says, “This text will change when you click the button.”

After we click the button, our web page changes and shows our new text:

Частые ошибки

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

Функция должна быть присвоена как , а не .

Если добавить скобки, то – это уже вызов функции, результат которого (равный , так как функция ничего не возвращает) будет присвоен . Так что это не будет работать.

…А вот в разметке, в отличие от свойства, скобки нужны:

Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создаёт функцию с телом из значения атрибута: .

Так что разметка генерирует такое свойство:

Используйте именно функции, а не строки.

Назначение обработчика строкой также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется.

Не используйте для обработчиков.

Такой вызов работать не будет:

Регистр DOM-свойства имеет значение.

Используйте , а не , потому что DOM-свойства чувствительны к регистру.

Особенности IE8-

Все браузеры, кроме IE8-, генерируют в дополнение к другим событиям.

То есть, обычно:

• (нажал)
• (отжал)
• (нажал)
• (отжал).

IE8- на втором клике не генерирует и .

Получается:

• (нажал)
• (отжал)
• (нажал второй раз, без события)
• (отжал).

Поэтому отловить двойной клик в IE8-, отслеживая только , нельзя, ведь при втором нажатии его нет. Нужно именно событие .

В старых IE8- не поддерживалось свойство , а вместо него использовалось свойство , которое является 3-х битным числом, в котором каждому биту соответствует кнопка мыши. Бит установлен в 1, только если соответствующая кнопка нажата.

Чтобы его расшифровать – нужна побитовая операция («битовое И»):

• (1-й бит установлен), если нажата левая кнопка,
• (2-й бит установлен), если нажата правая кнопка,
• (3-й бит установлен), если нажата средняя кнопка.

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

Можно легко сделать функцию, которая будет ставить свойство из , если его нет:

В IE до версии 9 не поддерживаются свойства , но их можно получить, прибавив к величину прокрутки страницы.

Более подробно о её вычислении вы можете прочитать в разделе .

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

Клики мыши

Нажатие клавиши мыши также приводит в действие ряд событий. События «mousedown» и «mouseup» похожи на «keydown» и «keyup«. Они запускаются, когда нажата и отпущена клавиша мыши. Данные события возникают в узлах DOM, на которые был наведен указатель мыши, когда возникло событие.

Для общего узла, к которому относилось как нажатие, так и освобождение клавиши мыши, после события «mouseup» запускается событие «click«. Например, если нажать клавишу мыши на одном пункте, а затем переместить курсор на другой пункт и отпустить кнопку, то событие «click» будет происходить в элементе, который содержит оба эти пункта.

Если два клика возникли близко друг к другу, также запускается событие «dblclick» (двойной клик). Оно возникает после второго клика. Чтобы получить точную информацию о месте, где произошло событие мыши, нужно получить значение свойств pageX и pageY, которые содержат координаты события (в пикселях) относительно левого верхнего угла документа.

Ниже приведена реализация примитивной программы для рисования. Каждый раз при нажатии мыши в документе (под курсором) добавляется точка:

<style>
  body {
    height: 200px;
    background: beige;
  }
  .dot {
    height: 8px; width: 8px;
    border-radius: 4px; /* закругленные углы */
    background: blue;
    position: absolute;
  }
</style>
<script>
  addEventListener("click", function(event) {
    var dot = document.createElement("div");
    dot.className = "dot";
    dot.style.left = (event.pageX - 4) + "px";
    dot.style.top = (event.pageY - 4) + "px";
    document.body.appendChild(dot);
  });
</script>

Свойства clientX и clientY подобны pageX и pageY, но они относятся к видимой части документа. Они могут использоваться для сравнения координат мыши с координатами, возвращаемыми функцией getBoundingClientRect.

Применяем jQuery

Если в проекте используется библиотека jQuery, то можно ещё упростить код. Рассмотрим два самых распространенных способа:

$(function(){
    $(".link").click(function() {
        //действия
    });
});

И ещё один вариант, который идентичен предыдущему.

$(function(){
    $(".link").on("click", function(){
        //действия
    });
});

С обработчиком «on()» лучше ознакомиться отдельно, так как он несет в себе много полезного функционала. Например, возможность указать через пробел несколько событий к которым будет применяться действие, делегировать события на дочерние элементы, а так же он полезен если необходимо повесить событие на динамически добавляемые элементы, которых изначально нет на странице.

Вложенные события обрабатываются синхронно

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

Исключением является ситуация, когда событие инициировано из обработчика другого события.

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

В примере ниже событие обрабатывается синхронно во время обработки :

Порядок вывода: 1 → вложенное событие → 2.

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

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

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

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

Новый порядок вывода: 1 → 2 → вложенное событие.

Объекты событий

Хотя мы не упоминали об этом в приведенных выше примерах, в функции обработчиков JavaScript event передается аргумент: объект события. Он предоставляет дополнительную информацию о событии. Например, если мы хотим знать, какая клавиша мыши была нажата, нужно получить значение свойства объекта события which:

<button>Кликните по мне любой клавишей мыши</button>
<script>
  var button = document.querySelector("button");
  button.addEventListener("mousedown", function(event) {
    if (event.which == 1)
      console.log("Left button");
    else if (event.which == 2)
      console.log("Middle button");
    else if (event.which == 3)
      console.log("Right button");
  });
</script>

Информация, хранящаяся в объекте, различается зависимости от типа события. Свойство объекта type всегда содержит строку, идентифицирующую событие (например, «click» или «mousedown«).

javascript onclick без клика

javascript onclick без кликаjavascript onclick без клика

но первое, что я подумал… вспомнил старый пошлый анекдот! дети, если вам нет 16, то закрываем страницу на этом месте!

Закрыли!? Я жду!

Теперь продолжим со взрослыми…

Встречается парочка на хате, а у парня был попугай! Девушка:

— я не могу заниматься этим, когда он смотрит…

Парень накинул тряпку на клетку.

И говорит попугаю! Будешь подсматривать — голову оторву!

Начали заниматься любовью!

— Давай я сверху, ты снизу!

— Давай!

…

— Давай ты сверху, я снизу!

— Давай!

…

— А теперь давай ты сверху, и я сверху!

Попугай:

— Пусть мне оторвут голову! Но это я должен увидеть!

Итого

Есть три способа назначения обработчиков событий:

1. Атрибут HTML: .
2. DOM-свойство: .
3. Специальные методы: для добавления, для удаления.

HTML-атрибуты используются редко потому, что JavaScript в HTML-теге выглядит немного странно. К тому же много кода там не напишешь.

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

Последний способ самый гибкий, однако нужно писать больше всего кода. Есть несколько типов событий, которые работают только через него, к примеру и . Также поддерживает объекты в качестве обработчиков событий. В этом случае вызывается метод объекта .

Не важно, как вы назначаете обработчик – он получает объект события первым аргументом. Этот объект содержит подробности о том, что произошло

Мы изучим больше о событиях и их типах в следующих главах.