Атрибути подій HTML - Топ 5 атрибутів події HTML із прикладами

Вступ до атрибутів подій HTML

У цій статті ми детально розповімо про атрибути подій HTML. Події - це дії, які виконуються в результаті дій користувача. Наприклад, коли користувач натискає клавішу на клавіатурі для читання даних, тоді, як кажуть, це події на клавіатурі. Ці дії виконуються, коли користувач заходить на веб-сайт і виконує натискання кнопки або коли сторінка завантажується натисканням кнопки оновлення, коли браузер здійснює маніпуляції на сторінках, всі ці дії вважаються подіями. Тут ми перейдемо до основного розуміння подій та того, як це працює в браузері на дії користувача. Існує різний тип подій, які відбуваються у всіх вікнах браузера, які пояснені в наступних розділах.

5 найпопулярніших атрибутів HTML

Існує інший варіант подій, доступних у HTML. І всі ці події мають невеликий блок коду, названий як обробник подій, який запускається під час виконання події. Вони додаються до елементів HTML. Обробники подій або слухачі подій відіграють важливу роль в атрибутах подій HTML. Давайте розглянемо різні типи атрибутів подій, які глобально оголошені та застосовані до елементів HTML, також детально їх роботи. В основному використовуються чотири атрибути первинних подій. Вони є:

1. Вікно події
2. Форма подій
3. Мишачі події
4. Події на клавіатурі
5. Перетягування подій

Опишемо всі ці ознаки по черзі на прикладі. По-перше, ми підемо з.

1. Вікно події

• onafterprintEvent: Цей атрибут підтримується всіма тегами Html і працює, коли сторінка розпочалася друком і має єдиний скрипт значення. Ось приклад прикладу HTML-коду. Цей приклад показує, що при натисканні кнопки друкується повідомлення, яке друкується в діалоговому повідомленні.

Код:



Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)





Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)





Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)





Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)





Windows onafterprint Event

Windows onafterprint Event
This attribute works in IE and Mozilla

function myfun() (
alert("Document is being printed");
)



Вихід:

• onbeforeprint: працює перед друком. Подія звільняється після процесу друку. Нижче наведено приклад коду.

Код:



body (
color: #9370DB;
background-color: #BC8F8F;
text-align: center;
padding: 20px;
)
p (
font-size: 2rem;
)

Attribute Demo




body (
color: #9370DB;
background-color: #BC8F8F;
text-align: center;
padding: 20px;
)
p (
font-size: 2rem;
)

Attribute Demo




body (
color: #9370DB;
background-color: #BC8F8F;
text-align: center;
padding: 20px;
)
p (
font-size: 2rem;
)

Attribute Demo


тригер для друку.

функція get () (
document.body.style.background = "# 00BFFF";
)

Вихід:

• onerror: Ця функція спрацьовує при видаленні помилки, поки жодного елемента не існує.

Код:






Привіт Світ.

функція myFun () (
попередження ("проблема з завантаженням зображення.");
)

Вихід:

• onload: Ця функція допомагає завантажити об’єкт і добре працює, щоб перевірити, чи правильно завантажена веб-сторінка.

Код:



onload event demo


function ldImg() (
alert("image loaded without error");
)



Вихід:

• onresize: ця подія запускається, коли розмір вікна браузера та будь-який елемент може бути запущений під атрибутом зміни розміру.

Код:


onresize event

function cmg() (
alert('welcome to educba');
)
window.onresize = cmg;

onclick="alert(window.onresize);">


Вихід:

• onunload: Ця подія ініціюється, коли вікно веб-сторінки закрито або коли користувач залишає веб-сторінку. Наведений нижче код вивантажує сторінку, коли користувач залишає та надсилає попередження завдяки пошуку. Ця подія інколи працює у всіх браузерах.

Код:


Welcometo educba tutorial



Welcometo educba tutorial



Welcometo educba tutorial


Залиште сторінку.

функція onfunc () (
попередження ("Дякую за пошук!");
)

Вихід:

2. Формуйте події

Він працює з формою Controls. Нижче наведені атрибути, які виникають під час взаємодії користувача із браузерами.

• onblur: ця подія відбувається, коли увагу користувача відходить від вікна форми. У наступному прикладі введено введення в нижній регістр, і при натисканні кнопки подання він перетворює вихід у верхній регістр.

Код:



Form onblur
body (
text-align:center;
)
h1 (
color:pink;
)

EDUCBA
onblur="myfunc()">
Submit
function myfunc() (
var a = document.getElementById("aaa");
a.value = a.value.toUpperCase();
)





Form onblur
body (
text-align:center;
)
h1 (
color:pink;
)

EDUCBA
onblur="myfunc()">
Submit
function myfunc() (
var a = document.getElementById("aaa");
a.value = a.value.toUpperCase();
)





Form onblur
body (
text-align:center;
)
h1 (
color:pink;
)

EDUCBA
onblur="myfunc()">
Submit
function myfunc() (
var a = document.getElementById("aaa");
a.value = a.value.toUpperCase();
)



Вихід:

• onchange: Ця подія відбувається, коли користувач змінює існуючий елемент у формі. Це відбувається, коли елемент втрачає фокус.

Код:



HTML onchange


select the dress color
pink
Yellow
White


Примітка. Виберіть будь-яку опцію

Охарактеризуйте себе коротко:

Надіслати

Вихід:

• onfocus: Цей атрибут увімкнено, коли користувач звертає увагу на елемент на веб-сторінці або коли фокус вводиться. Наведений нижче приклад підкреслює, коли ми вводимо вхід у поле.

Код:





Ця подія спрацьовує, коли елемент фокусується.

Ім'я:
Місцезнаходження:
функція onfoc (a) (
document.getElementById (a) .style.background = "рожевий";
)

Вихід:

• oninput: Ця подія запускається, коли вводиться вхідне поле у ​​поле введення. Він активується при зміні значення в текстовому полі. Він відображає, як тільки змінюється значення елемента.



HTML oninput

body (
text-align:center;
)
h1 (
color:red;
)

Event Attribute
Enter the text:

function myon()
(
var x = document.getElementById("EDUCBA").value;
document.getElementById("sid").innerHTML = "Enter the text : " +x;
)





HTML oninput

body (
text-align:center;
)
h1 (
color:red;
)

Event Attribute
Enter the text:

function myon()
(
var x = document.getElementById("EDUCBA").value;
document.getElementById("sid").innerHTML = "Enter the text : " +x;
)





HTML oninput

body (
text-align:center;
)
h1 (
color:red;
)

Event Attribute
Enter the text:

function myon()
(
var x = document.getElementById("EDUCBA").value;
document.getElementById("sid").innerHTML = "Enter the text : " +x;
)



Вихід:

• oninvalid: Цей атрибут викликає події, коли текст, введений у тип введення, недійсний або залишається порожнім. Цей атрибут події повинен заповнювати вхідний елемент.

Код:



example oninvalid Event
p (
color:orange;
)
body (
text-align:center;
)



HTML використовується для створення веб-сторінки

Введіть ім'я:

Вихід:

• onreset: запускається під час спокою форми. У наступному прикладі йдеться про те, що при натисканні кнопки форма обробляється і знову при натисканні кнопки скидання форми скидається.

Код:



body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)





body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)


1. 

body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)




body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)





body (font-family:calibri;)
label (font-variant:small-caps;)
ol (background-color:#610000; margin-top:35px;)
li (margin-top:3px; padding:3px; background-color:rose; font-size:15px;)
div (position:absolute;top:250px;left:70px; font-size:1.5em;
)

Form with input to reset and submit

Enter input:



function onInva() (
alert("Input field cannot be empty!");
)
function onInp() (
var input_value = document.getElementById("iv").value;
document.getElementById("a_box").innerHTML = "Input value:
" + iv;
)
function onRes() (
alert("form is reset!");
)
function onSubmitEvent() (
alert("Form is loading");
location.reload();
)



Вихід:

• onsearch: працює, коли користувач натискає кнопку введення.

Код:





Пишіть у полі.
функція myF () (
var k = document.getElementById ("значення1");
document.getElementById ("зразок"). innerHTML = "Елемент пошуку:" + k.value;
)

Вихід:

• onselect: спрацьовує, коли у вікні введення вибрано текст. Він видає діалогове вікно, друкуючи попереджувальне повідомлення.

Код:



onselect demo
h1 (
color:magenta;
)
body (
text-align:center;
)

function eduhtml() (
alert("text highlighted!");
)

EDUCBA Online tutorial
Text Box:





onselect demo
h1 (
color:magenta;
)
body (
text-align:center;
)

function eduhtml() (
alert("text highlighted!");
)

EDUCBA Online tutorial
Text Box:





onselect demo
h1 (
color:magenta;
)
body (
text-align:center;
)

function eduhtml() (
alert("text highlighted!");
)

EDUCBA Online tutorial
Text Box:



Вихід:

• onsubmit: мета цієї події - виконати дію, виконану під час натискання кнопки подання.

Код:



Onsubmit Example

Enter name:
Email :


function myF() (
alert("The form was submitted");
)



Вихід:

3. Основні атрибути ради

• OnKeyDown: спрацьовує, коли користувач натискає клавішу зі стрілкою вниз.

Код:





Приклад для Onkeydown.

функція mykedwn () (
попередження ("натискання клавіш активоване");
)

Вихід:

• OnKeyPress: ця подія спрацьовує, коли користувач натискає будь-яку клавішу на клавіатурі. Примітка: деякий браузер не підтримує натискання жодної клавіші.

Код:





Цей приклад показує, коли тип користувача в текстовій області викликає подію

>

Вихід:

• OnKeyUp: Цей атрибут спрацьовує, коли користувач випускає курсор з текстового поля. Нижче йде демонстрація.

Код:





Цей приклад перетворює персонажа в малі регістри.

Введіть назву:
функція mykey () (
var g = document.getElementById ("jjj");
g.value = g.value.toLowerCase ();
)

Вихід:

4. Атрибути події миші

Ця дія викликає подію миші, коли мишу натискають або з комп'ютера, або з будь-яких зовнішніх пристроїв, таких як смартфон або планшет. Деякі з подій миші наведені нижче:

• onclick: спрацьовує, коли користувач натискає кнопку миші. Нижче наведено приклад введення для відображення події під час натискання миші.

Код:



HTML onclick Event




HTML onclick Event




HTML onclick Event


Подія відіграє важливу роль у HTML.

Клацніть

функція oncf () (
document.getElementById ("зразок"). innerHTML = "Hello World";
)

Вихід:

• onmousemove: запускається, коли миша переміщується по зображенню в будь-якому напрямку.

Код:


Event onmousemove demo



Ця подія активується, коли вказівник перетягує свій напрямок.

Зразок тексту

Вихід:

• Onmouseup: Ця подія дає сповіщення, коли користувач відпускає кнопку на виході.

Код:



body (
color: "#ff0000";
height: 120vh;
background-color: #610000;
text-align: center;
)
.polygon (
float: right;
shape-inside: polygon(0 0, 0 200px, 100px 200px);
clip-path: polygon(0 0, 0 250px, 100px 300px);
height: 200px;
width: 200px;
background: linear-gradient(to bottom left, #7CFC00, #8B008B);
)
p (
margin: 30px auto;
)

HTML onmouseup Demo




body (
color: "#ff0000";
height: 120vh;
background-color: #610000;
text-align: center;
)
.polygon (
float: right;
shape-inside: polygon(0 0, 0 200px, 100px 200px);
clip-path: polygon(0 0, 0 250px, 100px 300px);
height: 200px;
width: 200px;
background: linear-gradient(to bottom left, #7CFC00, #8B008B);
)
p (
margin: 30px auto;
)

HTML onmouseup Demo




body (
color: "#ff0000";
height: 120vh;
background-color: #610000;
text-align: center;
)
.polygon (
float: right;
shape-inside: polygon(0 0, 0 200px, 100px 200px);
clip-path: polygon(0 0, 0 250px, 100px 300px);
height: 200px;
width: 200px;
background: linear-gradient(to bottom left, #7CFC00, #8B008B);
)
p (
margin: 30px auto;
)

HTML onmouseup Demo


клацніть під об'єктом

функція mupFn () (
document.querySelector ('. polygon'). style.transform = 'шкала (2.2)';
)

Вихід:

• Onmouseover: Виконайте JavaScript під час переміщення вказівника миші на зображення

Код:



Example demonstrating Onmouseover.
Mouse over
function A() (
document.getElementById("sample").style.color = "yellow";)
function B() (
document.getElementById("sample").style.color = "green";
)





Example demonstrating Onmouseover.
Mouse over
function A() (
document.getElementById("sample").style.color = "yellow";)
function B() (
document.getElementById("sample").style.color = "green";
)





Example demonstrating Onmouseover.
Mouse over
function A() (
document.getElementById("sample").style.color = "yellow";)
function B() (
document.getElementById("sample").style.color = "green";
)



Вихід:

5. Перетягніть атрибути події

Ця програма допомагає у вікні HTML, коли користувач перетягує елемент введення. Нижче наведено різні слухачі подій, які використовуються в HTML для зберігання перетягнутих даних.

• Ondrag: Це використовується, коли елемент перетягується з веб-сторінки.
• Ondragstart : Це спрацьовує, коли користувач починає тягнути з поля введення. Наведений нижче приклад демонструє перетягування області з двома цілями.

Код:



#b1, #b2 (
float:left;padding:11px;margin:11px; -moz-user-select:none;
)
#b1 ( background-color: #FF6699; width:65px; height:85px; )
#b2 ( background-color: #808000; width:180px; height:180px; )

function dStart(e) (
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
)


Drag demo
Drag the box.
ondragstart = "return dStart(e)">
Drag it
welcome





#b1, #b2 (
float:left;padding:11px;margin:11px; -moz-user-select:none;
)
#b1 ( background-color: #FF6699; width:65px; height:85px; )
#b2 ( background-color: #808000; width:180px; height:180px; )

function dStart(e) (
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
)


Drag demo
Drag the box.
ondragstart = "return dStart(e)">
Drag it
welcome





#b1, #b2 (
float:left;padding:11px;margin:11px; -moz-user-select:none;
)
#b1 ( background-color: #FF6699; width:65px; height:85px; )
#b2 ( background-color: #808000; width:180px; height:180px; )

function dStart(e) (
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
)


Drag demo
Drag the box.
ondragstart = "return dStart(e)">
Drag it
welcome