Обработчики событий
и в ней указан атрибут onclick. Через этот атрибут происходит «привязка» функции showMessage к событию onclick. То есть, при щелчке мышью по ссылке будет вызвана функция showMessage. Сама же функция должна быть определена в скрипте, например, так:
function showMessage() { alert("Hello!"); }
Теперь, при обновлении документа и щелчке мышью по ссылке на экране браузера будет отображаться окно с сообщением «Hello!». А можно ли программно применить обработчик для события onclick? Да, можно. Давайте для этого создадим еще один элемент:
p>input type="button" value="Событие onclick" /> let inp = document.querySelector("input"); inp.onclick = showMessage;
Обратите внимание, мы здесь передаем ссылку на функцию, поэтому записываем ее без круглых скобок в конце. Если прописать вот так:
то свойству onclick будет присвоен результат вызова функции, то есть, значение undefined и обработки события уже не будет. Вот эти два способа (через атрибут onclick и свойство onclick) для назначения обработчиков, в действительности, работают одинаково: в обоих случаях при событии onclick соответствующего элемента будет вызвана функция showMessage. Но есть и отличия. При записи через атрибут происходит фактически следующее:
a.onclick = function(event) { showMessage(); }
то есть, свойству onclick присваивается ссылка на анонимную функцию с аргументом event (о нем мы поговорим позже) и в ней уже вызывается указанная функция showMessage. Именно поэтому в атрибуте onclick мы прописываем функцию showMessage() с круглыми скобками. На практике используют оба способа для назначения обработчика какого-либо события. И в обоих случаях обработчик будет храниться в соответствующем свойстве (например, onclick, как в нашем скрипте). Если необходимо сбросить обработчик и не реагировать, например, на событие onclick, то ему присваивается значение null:
inp.onclick = showMessage; inp.onclick = null;
Теперь при нажатии на кнопку ничего не будет происходить. В теле каждой функции-обработчика можно использовать ключевое слово this, которое ссылается на элемент DOM-дерева, на котором висит этот обработчик. Например, перепишем нашу функцию так:
function showMessage() { alert(this.tagName); }
Нажимая на кнопку, получаем значение input, а при нажатии на ссылку – значение undefined. Почему у ссылки undefined? Дело в том, что обработчик ссылки прописан через атрибут onclick и вызов осуществляется из анонимной функции. В результате контекст this теряется и становится undefined. Исправить это можно несколькими способами. Ну, во-первых, назначить обработчик через свойство onclick:
function showMessage(event) { alert(event.currentTarget.tagName); }
- event.type – тип события (например, для onclick будет содержать строку «click»);
- event.clientX / event.clientY – координаты мыши в момент возникновения события (относительно границ окна браузера).
inp.addEventListener("click", showMessage); inp.addEventListener("click", function(event) { console.log(event.clientX, event.clientY); });
Теперь, при нажатии на кнопку мы увидим окно с сообщение «input» и в консоли координаты мыши в момент нажатия на кнопку. Обратите внимание, если у нас будет задан еще один обработчик через свойство onclick:
inp.onclick = function() { console.log("обработчик onclick"); };
то он будет третьим. То есть, метод addEventListener не использует свойство onclick для назначения обработчиков, он реализует другой механизм на основе паттерна проектирования «слушатели». Поэтому на практике используют или метод addEventListener или свойство onclick, но не оба вместе. Для удаления обработчиков, созданных с помощью addEventListener, используется метод element.removeEventListener(event, handler[, options]); Все аргументы здесь аналогичны аргументам метода addEventListener. Например, удалим обработчик showMessage тега input:
inp.removeEventListener("click", showMessage);
Теперь, при обновлении документа, мы увидим только сообщения в консоли. А вот удалить обработчик анонимной функции не получится, так как у нас нет ссылки на нее, а значит, мы не можем указать нужный handler у метода removeEventListener. Вот это следует иметь в виду при использовании анонимных функций в качестве обработчиков событий. Также некоторым событиям можно назначать обработчики только с помощью метода addEventListener. Например, событию «transitionend», которое возникает при завершении CSS-анимации. Предположим, у нас имеется вот такой стиль:
style> input { transition: width 1s; width: 200px; } .expand { width: 400px; } style> p>input type="button" onclick="this.classList.toggle('expand')" value="Событие onclick" /> inp.addEventListener("transitionend", showMessage);
Теперь, при нажатии на кнопку, она постепенно увеличится и по окончании анимации вызовется метод showMessage. В заключение этого занятия я приведу пример назначения объекта в качестве обработчика события. Да, так тоже можно делать и выглядит это следующим образом:
inp.addEventListener("click", { handleEvent(event) { console.log("Событие: " + event.type); } });
Смотрите, здесь внутри объекта задан специальный метод handleEvent, который автоматически вызывается, если объект назначен в качестве обработчика события. То есть, это стандартизированный метод, который должен присутствовать в объекте для обработки события. То же самое можно сделать и через класс, например, так:
class MyHandler { handleEvent(event) { console.log("Событие: " + event.type); } } let inp = document.querySelector("input"); inp.addEventListener("click", new MyHandler());
onclick Event
The onclick event occurs when the user clicks on an HTML element.
Mouse Events
| Event | Occurs When |
|---|---|
| onclick | The user clicks on an element |
| oncontextmenu | The user right-clicks on an element |
| ondblclick | The user double-clicks on an element |
| onmousedown | A mouse button is pressed over an element |
| onmouseenter | The pointer is moved onto an element |
| onmouseleave | The pointer is moved out of an element |
| onmousemove | The pointer is moving over an element |
| onmouseout | The mouse pointer moves out of an element |
| onmouseover | The mouse pointer is moved over an element |
| onmouseup | The mouse button is released over an element |
See Also:
Tutorial:
Syntax
In JavaScript, using the addEventListener() method:
Technical Details
| Bubbles: | Yes |
|---|---|
| Cancelable: | Yes |
| Event type: | MouseEvent |
| Supported HTML tags: | All exept: , , , , , , , , , , and |
More Examples
Click a to display the date:
Click a element to change the text color:
Click me to change my color.
Another example on how to change the color of an element:
Click me to change my color.
Click to copy text from one input field to another:
function myFunction() document.getElementById(«field2»).value = document.getElementById(«field1»).value;
>
How to assign an «onclick» event to the window object:
function myFunction() document.getElementsByTagName(«BODY»)[0].style.backgroundColor = «yellow»;
>
Use onclick to create a dropdown:
function myFunction() document.getElementById(«myDropdown»).classList.toggle(«show»);
>
Browser Support
onclick is a DOM Level 2 (2001) feature.
It is fully supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.