HTML DOM Event 对象

2018-08-15 本文已影响3人 puxiaotaoc

HTML DOM Event 对象

onabort 事件：onabort 事件会在图像加载被中断时发生，当用户在图像完成载入之前放弃图像的装载，如单击了stop按钮时，就会调用该句柄；

<img src="image_w3default.gif" 
onabort="alert('Error: Loading of the image was aborted')" />

onblur 事件：对象失去焦点时触发；

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

onchange：域的内容被改变时触发；

<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>
<body>
输入您的姓名：
<input type="text" id="fname" onchange="upperCase(this.id)" />
</body>
</html>

onclick：与 onmousedown 不同的是，单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的；

// 在本例中，当按钮被单击时，第一个输入框中的文本会被拷贝到第二个输入框中
<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>

ondblclick：事件会在对象被双击时发生；

// 在本例中，当您双击按钮时，第二个域中内容会根据第一个域的内容而改变
<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!">
<br />
Field2: <input type="text" id="field2">
<br /><br />
双击下面的按钮，把 Field1 的内容拷贝到 Field2 中：
<br />
<button ondblclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
</body>
</html>

onerror：事件会在文档或图像加载过程中发生错误时被触发，在装载文档或图像的过程中如果发生了错误，就会调用该事件句柄；

// 如果装载图像时发生了错误，则显示一个对话框
<img src="image.gif" onerror="alert('The image could not be loaded.')" />

onfocus：事件在对象获得焦点时发生；

// 当输入框获得焦点时，其背景颜色将改变
<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>

onkeydown：事件会在用户按下一个键盘按键时触发；

// 用户无法在输入框中键入数字
<html>
<body>
<script type="text/javascript">
function noNumbers(e)
{
var keynum
var keychar
var numcheck
if(window.event) // IE
  {
  keynum = e.keyCode
  }
else if(e.which) // Netscape/Firefox/Opera
  {
  keynum = e.which
  }
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
<form>
<input type="text" onkeydown="return noNumbers(event)" />
</form>
</html>

onkeypress：事件会在键盘按键被按下并释放一个键时发生；

// 用户无法在输入框中键入数字
<html>
<body>
<script type="text/javascript">
function noNumbers(e)
{
var keynum
var keychar
var numcheck

if(window.event) // IE
  {
  keynum = e.keyCode
  }
else if(e.which) // Netscape/Firefox/Opera
  {
  keynum = e.which
  }
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
<form>
<input type="text" onkeypress="return noNumbers(event)" />
</form>

</html>

onkeyup：事件会在键盘按键被松开时发生

// 在例子中的输入域中键入字符时，字符会被更改为大写（逐一地）
<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>
<body>  
输入您的姓名： <input type="text" id="fname" onkeyup="upperCase(this.id)" />
</body>
</html>

onload：事件会在页面或图像加载完成后立即发生；

// 文本 "Page is loaded" 会被显示在状态栏中
<html>
<head>
<script type="text/javascript">
function load()
{
window.status="Page is loaded"
}
</script>
</head>
<body onload="load()">
</body>
</html>

onmousedown：事件会在鼠标按键被按下时发生；

// 对话框将显示出您所点击的元素的标签名
<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>

<body onmousedown="whichElement(event)">

<h2>This is a header</h2>
<p>This is a paragraph</p>
<img border="0" src="ball16.gif" alt="Ball">

</body>
</html>

onmousemove：事件会在鼠标指针移动时发生

// 当用户把鼠标移动到图像上时，将显示一个对话框
<img src="/i/eg_mouse2.jpg" alt="mouse"
onmousemove="alert('您的鼠标刚才经过了图片！')" />

onmouseout：事件会在鼠标指针移出指定的对象时发生；

// 鼠标指针移出图像时显示一个对话框
<img src="/i/example_mouse2.jpg" alt="mouse"
onmousemove="alert('您的鼠标刚才离开了图片！')" />

onmouseover：事件会在鼠标指针移动到指定的对象上时发生；

// 在网页上添加一个用作连接按钮的图像，然后我们会添加 onMouseOver 和 onMouseOut 事件，这样就可以在运行两个JavaScript 函数来切换两幅图像；
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById('b1').src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById('b1').src ="/i/eg_mouse2.jpg"
}
</script>
</head>

<body>
<a href="http://www.w3school.com.cn" 
onmouseover="mouseOver()" onmouseout="mouseOut()">
<img alt="Visit W3School!" src="/i/example_mouse2.jpg" id="b1" />
</a>
</body>
</html>

onmouseup：事件会在鼠标按键被松开时发生

// 点击图片并松开鼠标按键后，将显示一个对话框
<img src="/i/eg_mouse2.jpg" alt="mouse"
onmouseup="alert('您点击了图片！')" />

onreset：事件会在表单中的重置按钮被点击时发生；

// 当重置按钮被点击时，表单会改为默认值，并显示一个对话框；
<form onreset="alert('The form will be reset')">

Firstname: <input type="text" name="fname" value="John" />
<br />
Lastname: <input type="text" name="lname" />
<br /><br />
<input type="reset" value="Reset">

</form>

onresize：事件会在窗口或框架被调整大小时发生；

// 当用户试图调整窗口的大小时，将显示一个对话框
<body onresize="alert('You have changed the size of the window')">
</body>

onselect：事件会在文本框中的文本被选中时发生；

// 当用户试图选择文本框中的文本时，会显示一个对话框
<form>

Select text: <input type="text" value="Hello world!"
onselect="alert('You have selected some of the text.')" />
<br /><br />
Select text: <textarea cols="20" rows="5"
onselect="alert('You have selected some of the text.')">
Hello world!</textarea>

</form>

onsubmit：事件会在表单中的确认按钮被点击时发生；

// 当用户点击提交按钮时，会显示一个对话框
<form name="testform" action="jsref_onsubmit.asp"
onsubmit="alert('Hello ' + testform.fname.value +'!')">

What is your name?<br />
<input type="text" name="fname" />
<input type="submit" value="Submit" />

</form>

onunload：事件在用户退出页面时发生；

// 在页面关闭时会显示一个对话框
<body onunload="alert('The onunload event was triggered')">
</body>

HTML DOM Event 对象

猜你喜欢

热点阅读