Атрибути на 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 ("value1");
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 = "Здравей свят";
)

изход:

• 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