HTML 事件屬性

在本文中，我們將詳細討論 HTML 事件屬性。事件是由於使用者操作而執行的操作。例如，當使用者按下鍵盤讀取資料時，就稱為鍵盤事件。當使用者查看網站並點擊按鈕或按下刷新按鈕加載頁面（其中瀏覽器對頁面進行操作）時，就會完成這些活動；所有這些動作都稱為一個事件。在這裡，我們將基本了解事件以及它如何在瀏覽器中處理使用者操作。整個瀏覽器視窗中會發生不同類型的事件，以下部分將對此進行說明。

前 5 個 HTML 事件屬性

HTML 中提供了不同的事件變體。所有這些事件都有一個名為事件處理程序的小程式碼區塊，該程式碼區塊在執行事件操作時觸發。它們附加到 HTML 元素。事件處理程序或事件偵聽器在 HTML 事件屬性中扮演重要角色。讓我們看看全域聲明並應用於 HTML 元素的不同類型的事件屬性以及它們的詳細工作。主要使用四個主要事件屬性。他們是：

1. 視窗事件
2. 表單事件
3. 老鼠事件
4. 鍵盤事件
5. 拖放事件

我們將透過範例一一描述所有這些屬性。首先，我們一起去。

1.視窗事件

• onafterprintEvent: 所有 Html 標籤都支援此屬性，並且在頁面開始列印並且具有單值腳本時起作用。這是 HTML 程式碼的範例。此範例顯示了按下按鈕時的情況；它會列印一條在對話方塊訊息中列印的訊息。

代碼：

<title>
Windows onafterprint Event
</title>


<h1 id="Windows-onafterprint-Event">Windows onafterprint Event </h1>
<p>This attribute works in IE and Mozilla</p>

<script>
function myfun() {
alert("Document is being printed");
}
</script>

輸出：

• onbeforeprint：它在列印之前起作用。該事件在列印過程後被觸發。以下是範例程式碼。

代碼：

<style>
body {
color: #9370DB;
background-color: #BC8F8F;
text-align: center;
padding: 20px;
}
p {
font-size: 2rem;
}
</style>


<h1 id="Attribute-Demo"> Attribute Demo</h1>
<p style="color:#0000FF;">trigger to print.</p>
<div class="show"></div>
<script>
function get() {
document.body.style.background = "#00BFFF";
}
</script>

輸出：

• onerror: 當沒有元素存在時拋出錯誤時會觸發此函數。

代碼：

<img  src="/static/imghwm/default1.png" data-src="p.jpg" class="lazy" onerror="myFun()" alt="HTML 事件屬性" >
<p>hello world.</p>
<script>
function myFun() {
alert("problem with image loading.");
}
</script>

輸出：

• onload：此函數有助於載入對象，並且可以很好地查看網頁是否正確載入。

代碼：

<title>onload event demo</title>


<img  src="/static/imghwm/default1.png" data-src="pic.jpg" class="lazy" onload="ldImg()"    style="max-width:90%"  style="max-width:90%" alt="HTML 事件屬性" >
<script>
function ldImg() {
alert("image loaded without error");
}
</script>

輸出：

• onresize：當瀏覽器視窗大小調整時觸發該事件，任何元素在resize屬性下都可以觸發。

代碼：

<title>onresize event</title>


<script type="text/javascript">
function cmg() {
alert('welcome to educba');
}
window.onresize = cmg;
</script>


<input type="button" value="Click the button" onclick="alert(window.onresize);">

輸出：

• onunload：當網頁視窗關閉或使用者離開網頁時觸發此事件。下面的程式碼會在用戶離開時卸載頁面並引發感謝搜尋的警報。此事件有時適用於所有瀏覽器。

代碼：

<h1 id="Welcometo-educba-tutorial">Welcometo educba tutorial</h1>
<p>Leave the page .</p>
<script>
function onfunc() {
alert("Thank you for searching!");
}
</script>

輸出：

2.表單事件

它與表單控制項一起使用。以下是使用者與瀏覽器互動時發生的屬性。

• onblur：當使用者的注意力離開表單視窗時發生此事件。以下範例採用小寫形式輸入，按一下提交按鈕時，會將輸出轉換為大寫形式。

代碼：

<title> Form onblur </title>
<style>
body {
text-align:center;
}
h1 {
color:pink;
}
</style>


<h1 id="EDUCBA">EDUCBA</h1>
<input type="text" name="fname" id="aaa" onblur="myfunc()">
<button type="button">Submit</button>
<script>
function myfunc() {
var a = document.getElementById("aaa");
a.value = a.value.toUpperCase();
}
</script>

輸出：

• onchange: 當使用者變更表單中的現有元素時，會發生此事件。當元素失去焦點時就會發生這種情況。

代碼：

<meta charset="utf-8">
<title>HTML onchange</title>

 
select the dress color pink Yellow White

Note: Select any option

Describe yourself in short :   
  
Submit

輸出：

• onfocus: 當使用者專注於網頁上的元素或輸入獲得焦點時，會啟用此屬性。下面的範例突出顯示了我們在欄位中輸入的內容。

代碼：

<p>This event gets triggered whwn an element is been focussed.</p>
Name: <input type="text" id="name" onfocus="onfoc(this.id)"><br>
Location: <input type="text" id="loc" onfocus="onfoc(this.id)">
<script>
function onfoc(a) {
document.getElementById(a).style.background = "pink";
}
</script>

輸出：

• oninput: This event triggers when the input is entered in the input field. It has been activated when the value in the text field is changed. It reflects once the value of the element is changed.

<title> HTML oninput </title>

<style>
body {
text-align:center;
}
h1 {
color:red;
}
</style>

<h1 id="Event-Attribute"> Event Attribute </h1>
Enter the text:
<input type="text" id="EDUCBA" oninput="myon()">
<p id="sid"></p>
<script>
function myon()
{
var x = document.getElementById("EDUCBA").value;
document.getElementById("sid").innerHTML = "Enter the text : " +x;
}
</script>

Output:

• oninvalid: This attribute calls the events when the text entered in the input type is invalid or remains empty. This event attribute must fill the input element.

Code:

<title> example oninvalid Event </title>
<style>
p {
color:orange;
}
body {
text-align:center;
}
</style>     

<p> HTML is used to create a web page</p>

Enter the name:

 

Output:

• onreset: It is fired when a form is a rest. The following example says when you submit the button, a form is processed, and again when you click to reset, the form is being reset.

Code:

<style>
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;
}
</style>

<ol>
<li>Form with input to reset and submit</li>
</ol>

Enter input:

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

Output:

• onsearch: It works when a user presses an enter button.

Code:

<p>Write in the field.</p>&gt
<input type="search" id="value1" onsearch="myF()">
<p id="sample"></p>
<script>
function myF() {
var k = document.getElementById("value1");
document.getElementById("sample").innerHTML = "search element is: " + k.value;
}
</script>

Output:

• onselect: It is triggered when a text has been selected in an input box. It throws a dialog box printing an alert message.

Code:

<title>onselect demo</title>
<style>
h1 {
color:magenta;
}
body {
text-align:center;
}
</style>
<script>
function eduhtml() {
alert("text highlighted!");
}
</script>


<h1 id="EDUCBA-Online-tutorial">EDUCBA Online tutorial</h1>
Text Box: <input type="text" value="onselectattribute: A well defined portal" onselect="eduhtml()">

以上是HTML 事件屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！