第十一章 DOM事件

最新推荐文章于 2023-11-12 16:44:43 发布

wdpc2008

最新推荐文章于 2023-11-12 16:44:43 发布

阅读量180

点赞数

分类专栏： js 文章标签： Microsoft Firefox Opera JavaScript 浏览器 ViewUI

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。

onblur 事件会在对象失去焦点时发生。
最常用在文本框上
<html>
<head>
<title>test</title>
<script type="text/javascript">
function upperCase(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase()
}
</script>
</head>
<body>
<input type="text" id="fname" οnblur="upperCase()" />
</body>
</html>

onchange 事件会在域的内容改变时发生。
最常用在select下拉框上
<html>
<head>
<title>test</title>
<script type="text/javascript">
function myFun(){
var select = document.getElementById("province");//获取下拉框
var txt = document.getElementById("sp");//获取文本框
txt.value = select.value;//下拉框的值给文本框
}
</script>
</head>
<body>
<select id="province" οnchange="myFun()">
<option value="" selected="selected">请选择</option>
<option value="湖北">湖北</option>
<option value="湖南">湖南</option>
<option value="河南">河南</option>
<option value="河北">河北</option>
</select>
<input type="text" id="sp" />
</body>
</html>

onclick 事件会在对象被点击时发生
常用在button, radio, checkbo, img上
<html>
<head>
<title>test</title>
<script type="text/javascript">
function myFun(){
var select = document.getElementById("province");
var txt = document.getElementById("sp");
txt.value = select.value;
}
</script>
</head>
<body>
Field1: <input type="text" id="field1" value="Hello World!"><br />
Field2: <input type="text" id="field2"><br /><br />
点击下面的按钮，把 Field1 的内容拷贝到 Field2 中：<br />
<button οnclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
</body>
</html>

ondblclick 事件会在对象被双击时发生。
常用在button上
<html>
<head>
<title>test</title>
<script type="text/javascript">
function myFun(){
var select = document.getElementById("province");
var txt = document.getElementById("sp");
txt.value = select.value;
}
</script>
</head>
<body>
Field1: <input type="text" id="field1" value="Hello World!"><br />
Field2: <input type="text" id="field2"><br /><br />
点击下面的按钮，把 Field1 的内容拷贝到 Field2 中：<br />
<button οndblclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
</body>
</html>

onerror 事件会在文档或图像加载过程中发生错误时被触发。
<html>
<head>
</head>
<body>
<img src="image.gif" οnerrοr="alert('The image could not be loaded.')" />
</body>
</html>

onfocus 事件在对象获得焦点时发生。
<html>
<head>
<script type="text/javascript">
function setStyle(x){
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>
First name: <input type="text"
οnfοcus="setStyle(this.id)" id="fname" />
<br />
Last name: <input type="text"
οnfοcus="setStyle(this.id)" id="lname" />
</body>
</html>

onkeydown 事件会在用户按下一个键盘按键时发生。
常用在text, textarea
Internet Explorer 使用 event.keyCode 取回被按下的字符的ASCII，而 Netscape/Firefox/Opera 使用 event.which。
但是JS捕获键盘输入的内容非常有限,它不区分大小写,并且汉字也不能捕获,它能够捕获的内容为下表:
• keycode 8 = BackSpace BackSpace
• keycode 9 = Tab Tab
• keycode 12 = Clear
• keycode 13 = Enter
• keycode 16 = Shift_L
• keycode 17 = Control_L
• keycode 18 = Alt_L
• keycode 19 = Pause
• keycode 20 = Caps_Lock
• keycode 27 = Escape Escape
• keycode 32 = space space
• keycode 33 = Prior
• keycode 34 = Next
• keycode 35 = End
• keycode 36 = Home
• keycode 37 = Left
• keycode 38 = Up
• keycode 39 = Right
• keycode 40 = Down
• keycode 41 = Select
• keycode 42 = Print
• keycode 43 = Execute
• keycode 45 = Insert
• keycode 46 = Delete
• keycode 47 = Help
• keycode 48 = 0 equal braceright
• keycode 49 = 1 exclam onesuperior
• keycode 50 = 2 quotedbl twosuperior
• keycode 51 = 3 section threesuperior
• keycode 52 = 4 dollar
• keycode 553 = 5 percent
• keycode 54 = 6 ampersand
• keycode 55 = 7 slash braceleft
• keycode 56 = 8 parenleft bracketleft
• keycode 57 = 9 parenright bracketright
• keycode 65 = a A
• keycode 66 = b B
• keycode 67 = c C
• keycode 68 = d D
• keycode 69 = e E EuroSign
• keycode 70 = f F
• keycode 71 = g G
• keycode 72 = h H
• keycode 73 = i I
• keycode 74 = j J
• keycode 75 = k K
• keycode 76 = l L
• keycode 77 = m M mu
• keycode 78 = n N
• keycode 79 = o O
• keycode 80 = p P
• keycode 81 = q Q at
• keycode 82 = r R
• keycode 83 = s S
• keycode 84 = t T
• keycode 85 = u U
• keycode 86 = v V
• keycode 87 = w W
• keycode 88 = x X
• keycode 89 = y Y
• keycode 90 = z Z
• keycode 96 = KP_0 KP_0
• keycode 97 = KP_1 KP_1
• keycode 98 = KP_2 KP_2
• keycode 99 = KP_3 KP_3
• keycode 100 = KP_4 KP_4
• keycode 101 = KP_5 KP_5
• keycode 102 = KP_6 KP_6
• keycode 103 = KP_7 KP_7
• keycode 104 = KP_8 KP_8
• keycode 105 = KP_9 KP_9
• keycode 106 = KP_Multiply KP_Multiply
• keycode 107 = KP_Add KP_Add
• keycode 108 = KP_Separator KP_Separator
• keycode 109 = KP_Subtract KP_Subtract
• keycode 110 = KP_Decimal KP_Decimal
• keycode 111 = KP_Divide KP_Divide
• keycode 112 = F1
• keycode 113 = F2
• keycode 114 = F3
• keycode 115 = F4
• keycode 116 = F5
• keycode 117 = F6
• keycode 118 = F7
• keycode 119 = F8
• keycode 120 = F9
• keycode 121 = F10
• keycode 122 = F11
• keycode 123 = F12
• keycode 124 = F13
• keycode 125 = F14
• keycode 126 = F15
• keycode 127 = F16
• keycode 128 = F17
• keycode 129 = F18
• keycode 130 = F19
• keycode 131 = F20
• keycode 132 = F21
• keycode 133 = F22
• keycode 134 = F23
• keycode 135 = F24
• keycode 136 = Num_Lock
• keycode 137 = Scroll_Lock
• keycode 187 = acute grave
• keycode 188 = comma semicolon
• keycode 189 = minus underscore
• keycode 190 = period colon
• keycode 192 = numbersign apostrophe
• keycode 210 = plusminus hyphen macron
• keycode 211 =
• keycode 212 = copyright registered
• keycode 213 = guillemotleft guillemotright
• keycode 214 = masculine ordfeminine
• keycode 215 = ae AE
• keycode 216 = cent yen
• keycode 217 = questiondown exclamdown
• keycode 218 = onequarter onehalf threequarters
• keycode 220 = less greater bar
• keycode 221 = plus asterisk asciitilde
• keycode 227 = multiply division
• keycode 228 = acircumflex Acircumflex
• keycode 229 = ecircumflex Ecircumflex
• keycode 230 = icircumflex Icircumflex
• keycode 231 = ocircumflex Ocircumflex
• keycode 232 = ucircumflex Ucircumflex
• keycode 233 = ntilde Ntilde
• keycode 234 = yacute Yacute
• keycode 235 = oslash Ooblique
• keycode 236 = aring Aring
• keycode 237 = ccedilla Ccedilla
• keycode 238 = thorn THORN
• keycode 239 = eth ETH
• keycode 240 = diaeresis cedilla currency
• keycode 241 = agrave Agrave atilde Atilde
• keycode 242 = egrave Egrave
• keycode 243 = igrave Igrave
• keycode 244 = ograve Ograve otilde Otilde
• keycode 245 = ugrave Ugrave
• keycode 246 = adiaeresis Adiaeresis
• keycode 247 = ediaeresis Ediaeresis
• keycode 248 = idiaeresis Idiaeresis
• keycode 249 = odiaeresis Odiaeresis
• keycode 250 = udiaeresis Udiaeresis
• keycode 251 = ssharp question backslash
• keycode 252 = asciicircum degree
• keycode 253 = 3 sterling
• keycode 254 = Mode_switch
示例:
<script type="text/javascript">
function myFun(e){
var keychar = "";
if(navigator.appName == "Microsoft Internet Explorer"){
keychar = String.fromCharCode(e.keyCode);
}else{
keychar = String.fromCharCode(e.keyCode);
}
document.getElementById("div").innerHTML = "您键入的字符为:" + keychar;
}
</script>
<input type="text" id="txt" οnkeydοwn="myFun(event)"/>
<div id="div"></div>

示例:只能输入字母
<script type="text/javascript">
function myFun(e){
var keychar = "";
if(navigator.appName == "Microsoft Internet Explorer"){
keychar = String.fromCharCode(e.keyCode);
}else{
keychar = String.fromCharCode(e.keyCode);
}
return !/\d/.test(keychar);
}
</script>
<input type="text" id="txt" οnkeydοwn="return myFun(event)"/>

Onkeypress(松开) 事件会在键盘按键被按下并释放一个键时发生。此事件与onkeydown(按下)实现的功能差不多,只需要触发一个就可以了.
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" οnkeyup="upperCase(this.id)" />
</body>
</html>

onmousemove 事件会在鼠标指针移动时发生。
注释：每当用户把鼠标移动一个像素，就会发生一个 mousemove 事件。这会耗费系统资源去处理所有这些 mousemove 事件。因此请审慎地使用该事件。
示例:显示鼠标坐标:
<html>
<head>
<title> new document </title>
<script type="text/javascript">
function myFun(event){
var x=event.screenX;
var y=event.screenY;
document.getElementById("div").innerHTML = "X:" + x + "<br />Y:" + y;
}
</script>
</head>
<body οnmοusemοve="myFun(event)">
<div id="div"></div>
</body>
</html>

onmouseout 事件会在鼠标指针移出指定的对象时发生。
onmouseover 事件会在鼠标指针移动到指定的对象上时发生。
<img src="aa.gif" width="400" height="295" οnmοuseοut="alert('你走的')" οnmοuseοver="alert('你来了')"/>

onmouseup 事件会在鼠标按键被松开时发生。onmousedown 事件会在鼠标按键被按下时发生, 和onClick事件差不多,可以说onClick(高级事件), onmouseup ,onmousedown是低级事件, onClick是onmouseup ,onmousedown的高级封闭.
<img src="aa.gif" width="400" height="295" οnmοusedοwn="alert('你按下鼠标')" οnmοuseup="alert('你松开鼠标')" />

onreset 事件会在表单中的重置按钮被点击时发生。
onsubmit 事件会在表单中的确认按钮被点击时发生。
这两个事件是在form表单上触发的,不是在提交,重置按钮上触发的

<script type="text/javascript">
function myReset(){
return confirm('你确认重置表单吗,这样会清除刚才所填写的内容');
}

function mySubmit(){
return confirm('你确认提交表单吗,这样会提交您刚才所填写的内容到服务器');
}

</script>
<form method="post" action="http://www.w3school.com.cn" οnreset="return myReset()" οnsubmit="return mySubmit()" >
帐号:<input type="text" />
密码:<input type="password" />
<br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>

onload 事件会在页面或图像加载完成后立即发生。
通常用在body上,意思是说当页面加载成功后立即触发的方法
<html>
<head>
<script type="text/javascript">
function load()
{
window.status="Page is loaded"
}
</script>
</head>
<body οnlοad="load()">
</body>
</html>

onunload 事件在用户退出页面后时发生。
<script type="text/javascript">
function myFun(){
return confirm('你确认退出吗?');
}
</script>
<body οnunlοad="return myFun()">
</body>

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

wdpc2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十一章 DOM事件

HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。onblur 事件会在对象失去焦点时发生。最常用在文本框上 test function upperCase(){ var x=document.getElementById("fname"); x.value=x.value.toUpperCa...
复制链接

扫一扫

专栏目录