首页 > 技术文章 > onblur/onfocus/onmouseover/onmouseout 事件(TAB选项卡) onclick/onload事件

wyingli 2017-06-06 10:23 原文

onblur 事件

事件会在对象失去焦点时发生。onblur=“js函数";

举例:onblur 事件在用户离开输入框时执行 JavaScript 代码

 

<html>
<head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>

<body>
输入您的姓名:
<input type="text" id="fname" onblur="upperCase()" />
</body>
</html>

obj.focus();
document.getElementById('abc').focus(); //让abc获取焦点
onfocus 事件
事件在对象获得焦点时发生
onfocus =“js函数";
例子:当输入框获得焦点时,其背景颜色将改变
<html> <head> <script type="text/javascript"> function setStyle(x) { document.getElementById(x).style.background="yellow" } </script> </head> <body> First name: <input type="text" onfocus="setStyle(this.id)" id="fname" /> <br /> Last name: <input type="text" onfocus="setStyle(this.id)" id="lname" /> </body> </html>
onmouseover事件
用户鼠标移入元素时触发的事件,并执行onmouseover调用的函数

onmouseout事件
用户鼠标移开元素时触发的事件,并执行onmouseout调用的函数
以上经常用于Tab选项卡

onclick 事件

事件会在对象被点击时发生 onclick="js函数";

例子:当按钮被单击时,第一个输入框中的文本会被拷贝到第二个输入框中
<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!">
<br />
Field2: <input type="text" id="field2">
<br /><br />
点击下面的按钮,把 Field1 的内容拷贝到 Field2 中:
<br />
<button onclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
</body>
</html>

onload 事件

页面加载之后立即执行一段 JavaScript     <body onload="load()">

onload 常用在 <body> 中,一旦完全加载所有内容(包括图像、脚本文件、CSS 文件等),就执行一段脚本。

 








































 

推荐阅读