知识库
知识改变命运

5个常用的HTML事件属性介绍

【上云必备】上云仅¥102/年

在本文中,我们将详细讨论HTML事件属性。事件是由于用户操作而执行的操作。例如,当用户按下键盘上的键以读取数据时,则称其为键盘事件。这些活动是在用户进入网站并单击按钮时执行的,或者当页面在按下刷新按钮(浏览器在页面上进行操作)时加载页面时,所有这些动作被称为事件。在这里,我们将对事件以及事件在浏览器中如何进行用户操作进行基本了解。在整个浏览器窗口中会发生不同类型的事件,以下各节对此进行了说明。

前5个HTML事件属性

HTML中提供了不同的事件变体。所有这些事件都有一小段名为事件处理程序的代码,在执行事件操作时将触发该代码。这些附加到HTML元素。事件处理程序或事件侦听器在HTML事件属性中起重要作用。让我们看看全局声明并应用于HTML元素的不同类型的事件属性,以及它们的详细工作。主要使用四个主要事件属性。他们是:

  • 窗口事件
  • 表单事件
  • 鼠标事件
  • 键盘事件
  • 拖放事件

我们将通过一个例子一个个地描述所有这些属性。首先,我们去。

1.窗口事件
onafterprintEvent:所有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>

 

输出:

onbeforeprint:在打印前起作用。该事件在打印过程后触发。下面是示例代码。
码:

<!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>

 

输出:

onerror:当不存在任何元素时引发错误时,将触发此函数。
码:

<!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>

 

输出:

onload:此功能有助于加载对象,并且可以很好地查看网页是否正确加载。
码:

<!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>

 

输出:

onresize:调整浏览器窗口的大小时触发此事件,并且可以在resize属性下触发任何元素。
码:

<!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>

 

输出:

onunload:关闭网页窗口或用户离开网页时触发此事件。当用户离开并引发警告时,以下代码将卸载页面,感谢您的搜索。有时,此事件在所有浏览器中都有效。
码:

<!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>

 

输出:

2.表格事件
它与表单控件一起使用。以下是用户与浏览器进行交互时出现的属性。

onblur: 当用户的注意力离开表单窗口时,发生此事件。以下示例以小写形式输入,单击“提交”按钮时,将输出变为大写形式。
码:

<!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>

 

输出:

onchange:当用户更改表单中的现有元素时,将发生此事件。当某个元素失去焦点时就会发生这种情况。
码:

<!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>

 

输出:

onfocus:当用户将注意力放在网页上的元素上或输入集中时,启用此属性。下面的示例突出显示了当我们在字段中输入输入内容时的情况。
码:

<!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>

 

输出:

oninput:在输入字段中输入输入时触发此事件。更改文本字段中的值时将激活该功能。一旦元素的值更改,它就会反映出来。

<!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>

 

输出:

oninvalid:当在输入类型中输入的文本无效或保持为空时,此属性调用事件。此事件属性必须填充输入元素。
码:

<!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>

 

输出:

onreset:表单休息时触发。下面的示例说明,当您提交按钮时,将处理表单,而在单击以重置表单时,将再次重置该表单。
码:

<!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>

 

输出:

onsearch:当用户按下回车按钮时,它起作用。
码:


<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>

 

输出:

onselect:在输入框中选择文本时触发。它会抛出一个对话框,显示警告消息。
码:

<!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>

 

输出:

onsubmit:此事件的目的是执行按下提交按钮时执行的操作。
码:

<!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>

 

输出:

3.关键板属性
OnKeyDown:当用户按下向下箭头键时触发。
码:

<!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>

 

输出:

OnKeyPress:当用户按下键盘上的任何键时,将触发此事件。注意:某些浏览器不支持按任何键。
码:

<!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>

 

输出:

OnKeyUp:当用户从文本字段释放光标时,将触发此属性。下面是演示。
码:

<!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>

 

输出:

4.鼠标事件属性
从计算机或任何其他外部设备(如智能手机或平板电脑)按下鼠标时,此操作将触发鼠标事件。以下是一些鼠标事件:

onclick:  当用户按下鼠标按钮时触发。下面提供了一个输入示例,以显示单击鼠标时的事件。
码:

<!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>

 

输出:

onmousemove:当鼠标沿任意方向移到图像上方时触发。
码:

<!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>

 

输出:

Onmouseup:当用户释放输出上的按钮时,此事件会发出通知。
码:

<!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>

 

输出:

Onmouseover: 将鼠标指针移到图像上时执行JavaScript
码:

<!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>

 

输出:

5.拖动事件属性
当用户拖动输入元素时,此应用程序将在HTML窗口中提供帮助。以下是HTML中用于存储拖动数据的不同事件侦听器。

Ondrag:从网页中拖动元素时使用。
Ondragstart:当用户开始从输入字段中拖动时触发。下面的示例演示如何拖动两个目标区域。
码:

<!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>

 

输出:

ondrop: 将可拖动元素放在<div>元素中时执行此属性。
码:

<!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>

 

输出:

赞(0)
未经允许不得转载:知鸟云知识库 » 5个常用的HTML事件属性介绍
分享到: 更多 (0)

惟创新者进,惟创新者强,惟创新者胜

云服务器域名注册