在本文中,我們將詳細討論 HTML 事件屬性。事件是由於使用者操作而執行的操作。例如,當使用者按下鍵盤讀取資料時,就稱為鍵盤事件。當使用者查看網站並點擊按鈕或按下刷新按鈕加載頁面(其中瀏覽器對頁面進行操作)時,就會完成這些活動;所有這些動作都稱為一個事件。在這裡,我們將基本了解事件以及它如何在瀏覽器中處理使用者操作。整個瀏覽器視窗中會發生不同類型的事件,以下部分將對此進行說明。
HTML 中提供了不同的事件變體。所有這些事件都有一個名為事件處理程序的小程式碼區塊,該程式碼區塊在執行事件操作時觸發。它們附加到 HTML 元素。事件處理程序或事件偵聽器在 HTML 事件屬性中扮演重要角色。讓我們看看全域聲明並應用於 HTML 元素的不同類型的事件屬性以及它們的詳細工作。主要使用四個主要事件屬性。他們是:
我們將透過範例一一描述所有這些屬性。首先,我們一起去。
代碼:
<!DOCTYPE html> <html> <head> <title> Windows onafterprint Event </title> </head> <body onafterprint="myfun()"> <h1>Windows onafterprint Event </h1> <p>This attribute works in IE and Mozilla</p> <body style = "text-align:center"> <script> function myfun() { alert("Document is being printed"); } </script> </body> </html>
輸出:
代碼:
<!DOCTYPE html> <html> <head> <style> body { color: #9370DB; background-color: #BC8F8F; text-align: center; padding: 20px; } p { font-size: 2rem; } </style> </head> <body onbeforeprint="get()"> <h1> Attribute Demo</h1> <p style="color:#0000FF;">trigger to print.</p> <div class="show"></div> <script> function get() { document.body.style.background = "#00BFFF"; } </script> </body> </html>
輸出:
代碼:
<!DOCTYPE html> <html> <body> <img src="p.jpg" onerror="myFun()"> <p>hello world.</p> <script> function myFun() { alert("problem with image loading."); } </script> </body> </html>
輸出:
代碼:
<!DOCTYPE html> <html> <head> <title>onload event demo</title> </head> <body> <img src="pic.jpg" onload="ldImg()" width="50" height="92"> <script> function ldImg() { alert("image loaded without error"); } </script> </body> </html>
輸出:
代碼:
<!DOCTYPE html> <head> <title>onresize event</title> </head> <body> <script type="text/javascript"> function cmg() { alert('welcome to educba'); } window.onresize = cmg; </script> </head> <body> <input type="button" value="Click the button" onclick="alert(window.onresize);"> </body> </html>
輸出:
代碼:
<!DOCTYPE html> <html> <body onunload="onfunc()"><h1>Welcometo educba tutorial</h1> <p>Leave the page .</p> <script> function onfunc() { alert("Thank you for searching!"); } </script> </body> </html>
輸出:
它與表單控制項一起使用。以下是使用者與瀏覽器互動時發生的屬性。
代碼:
<!DOCTYPE html> <html> <head> <title> Form onblur </title> <style> body { text-align:center; } h1 { color:pink; } </style> </head> <body> <h1>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> </body> </html>
輸出:
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML onchange</title> </head> <body> <form name="example" action=""> <input type="text" name="rahul" onchange="alert('input is changed')"><br> <label>select the dress color</label> <select onchange="alert('You have changed the selection!');"> <option>pink</option> <option>Yellow</option> <option>White</option> </select> <p><strong>Note:</strong> Select any option </p> <label>Describe yourself in short : </label> <br/><textarea cols="15" rows="7" name="details" onchange="alert('description has changed')"> </textarea><br> <button type="button" name="submit">Submit</button> </form> </body> </html>
輸出:
代碼:
<!DOCTYPE html> <html> <body> <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> </body> </html>
輸出:
<!DOCTYPE html> <html> <head> <title> HTML oninput </title> </head> <style> body { text-align:center; } h1 { color:red; } </style> <body> <h1> 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> </body> </html>
Output:
Code:
<!DOCTYPE html> <html> <head> <title> example oninvalid Event </title> <style> p { color:orange; } body { text-align:center; } </style> </head> <body> <p> HTML is used to create a web page</p> <form method="get"> Enter the name: <input type="text" oninvalid="alert('Fill the text form!');" required> <input type="submit" value="Submit"> </form> </body> </html>
Output:
Code:
<!DOCTYPE html> <html> <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> <body> <ol> <li>Form with input to reset and submit</li> </ol> <form action="" method="get" onreset="onRes()" onsubmit="onSub()"> <label>Enter input:<br /><input type="text" id="iv" oninvalid="onInva()" oninput="onInp()"></label><br /><br /> <input type="submit" value="press"> <input type="reset"> </form> <div id="a_box"></div> <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> </body> </html>
Output:
Code:
<!DOCTYPE html> <html> <body> <p>Write in the field.</p> <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> </body> </html>
Output:
Code:
<!DOCTYPE html> <html> <head> <title>onselect demo</title> <style> h1 { color:magenta; } body { text-align:center; } </style> <script> function eduhtml() { alert("text highlighted!"); } </script> </head> <body> <h1>EDUCBA Online tutorial</h1> Text Box: <input type="text" value="onselectattribute: A well defined portal" onselect="eduhtml()"> </body> </html> </html>
Output:
Code:
<!DOCTYPE html> <html> <body> <head> <title> Onsubmit Example</title> </head> <form action="demo_form.asp" onsubmit="myF()"> Enter name: <input type="text" name="fname"> <label>Email :</label> <input id="email" name="email" type="text"> <input type="submit" value="Submit"> </form> <script> function myF() { alert("The form was submitted"); } </script> </body> </html>
Output:
Code:
<!DOCTYPE html> <html> <body> <p>Example for Onkeydown.</p> <input type="text" onkeydown="mykedwn()"> <script> function mykedwn() { alert("key press is activated"); } </script> </body> </html>
Output:
Code:
<!DOCTYPE html> <html> <body> <p> This example shows when a user type in the text area it triggers an event </p> <form> <textarea onkeypress="alert('triggering onkeypress event.')" placeholder="Place the cursor inside the textarea and press a key." " cols="30" rows="4" style="background-color:pink;">> </textarea> </form> </body> </html>
Output:
Code:
<!DOCTYPE html> <html> <body> <p> This example transforms the character to lower case.</p> Fill the name: <input type="text" id="jjj" onkeyup="mykey()"> <script> function mykey() { var g = document.getElementById("jjj"); g.value = g.value.toLowerCase(); } </script> </body> </html>
Output:
This action triggers a mouse event when a mouse is pressed either from a computer or any external devices like a smartphone or tablet. Some of the mouse events are given below:
Code:
<!DOCTYPE html> <html> <body> <h1>HTML onclick Event</h1> <p> Event plays a vital role in HTML.</p> <button onclick="oncf()">Click </button> <p id="sample"></p> <script> function oncf() { document.getElementById("sample").innerHTML = "Hello World"; } </script> </body> </html>
Output:
Code:
<!doctype html> <html> <head><title> Event onmousemove demo</title> </head> <body> <p>This event is activated when the pointer drags its direction.</p> <body style="width:200px;height:80px;border:2px solid;" onmousemove="javascript:alert('mouse action');">Sample text</body> </body> </html>
Output:
Code:
<!DOCTYPE html> <html> <head> <style> 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; } </style> </head> <body> <h1>HTML onmouseup Demo</h1> <div class="polygon" onmouseup="mupfn()"></div> <p> click below object</p> <script> function mupFn() { document.querySelector('.polygon').style.transform = 'scale(2.2)'; } </script> </body> </html>
Output:
Code:
<!DOCTYPE html> <html> <body> <title>Example demonstrating Onmouseover.</title> <h1 id="sample" onmouseover="A()" onmouseout="B()">Mouse over </h1> <script> function A() { document.getElementById("sample").style.color = "yellow";} function B() { document.getElementById("sample").style.color = "green"; } </script> </body> </html>
Output:
This application helps in the HTML window when the user drags the input element. Below are the different event listeners used in HTML to store dragged data.
Code:
<!DOCTYPE HTML> <html> <head> <style type = "text/css"> #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; } </style> <script type = "text/javascript"> function dStart(e) { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData("Text", e.target.getAttribute('id')); e.dataTransfer.setDragImage(e.target,0,0); return true; } </script> </head> <body> <center> <h2>Drag demo</h2> <div> Drag the box.</div> <div id = "b1" draggable = "true" ondragstart = "return dStart(e)"> <p>Drag it</p> </div> <div id = "b2">welcome</div> </center> </body> </html>
Output:
Code:
<!DOCTYPE HTML> <html> <head> <style type = "text/css"> #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; } </style> <script type = "text/javascript"> function dStart(e) { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData("Text", e.target.getAttribute('id')); e.dataTransfer.setDragImage(e.target,0,0); return true; } </script> </head> <body> <center> <h2>Drag dropdemo</h2> <div> drop the box.</div> <div id = "b1" draggable = "true" ondragstart = "return dStart(e)"> <p>Drag it</p> </div> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <div id = "b2">welcome</div> <span> dropzone </span> </center> </body> </html>
Output:
This event attribute helps to make a web application very easier and attractive. The different occurrence of actions generates various events. Even though this approach is generally avoided, the programmer likes to learn the function assigned for the HTML attributes events. These event handlers are still executed to beautify the web pages.
This is a guide to the HTML Event Attributes. Here we discuss the Introduction to HTML Event Attributes along with Code implementation and Output. you can also go through our suggested articles to learn more –
以上是HTML 事件屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!