`

第十一章 DOM事件

    博客分类：
  • js
MicrosoftFirefoxOperaJavaScript浏览器
阅读更多
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" onblur="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" onchange="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 onclick="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 ondblclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
</body>
</html>

onerror 事件会在文档或图像加载过程中发生错误时被触发。
<html>
<head>
</head>
<body>
  <img src="image.gif" onerror="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"
onfocus="setStyle(this.id)" id="fname" />
<br />
Last name: <input type="text"
onfocus="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" onkeydown="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" onkeydown="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" onkeyup="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 onmousemove="myFun(event)">
  <div id="div"></div>
</body>
</html>

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

onmouseup 事件会在鼠标按键被松开时发生。onmousedown 事件会在鼠标按键被按下时发生, 和onClick事件差不多,可以说onClick(高级事件), onmouseup ,onmousedown是低级事件, onClick是onmouseup ,onmousedown的高级封闭.
<img src="aa.gif" width="400" height="295" onmousedown="alert('你按下鼠标')" onmouseup="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" onreset="return myReset()" onsubmit="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 onload="load()">
</body>
</html>

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

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

分享到：
| 第十章 HDOM简介
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    完整版Java web开发教程PPT课件 Java开发进阶教程 第02章 Dom模型,控制客户端元素（共15页）.pptx

    完整版Java web开发教程PPT课件 Java开发进阶教程 第11章 AJAX实现（共11页）.pptx 完整版Java web开发教程PPT课件 Java开发进阶教程 第12章 自定义mvc框架（共11页）.pptx 完整版Java web开发教程PPT课件 Java开发...

    Java Script高级程序设计

    第11章 表单和数据完整性 第12章 表格排序 第13章 拖放 第14章 错误处理 第15章 JavaScript中的XML 第16章 客户端与服务器端的通讯 第17章 Web服务 第18章 与插件进行交互 第19章 部署问题 第20章 JavaScript的未来

    JavaScript DOM高级程序设计 Part II

    第十一章 丰富的Mashup!运用API添加地图/搜索及更多功能 第十二章 案例研究：用DOM设计选择列表 12.1 经典的感觉 12.2 构建更好的选择列表 12.3 策略？我们不需要臭烘烘的策略 12.4 添加事件--为人造select赋予...

    JavaScript DOM高级程序设计 Part I

    第十一章 丰富的Mashup!运用API添加地图/搜索及更多功能 第十二章 案例研究：用DOM设计选择列表 12.1 经典的感觉 12.2 构建更好的选择列表 12.3 策略？我们不需要臭烘烘的策略 12.4 添加事件--为人造select赋予...

    [JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.part1.rar

    　第11章　丰富的Mashup！运用API添加地图、搜索及更多功能　 　11.1　API密钥　 　11.2　客户端API：离不开JavaScript　 　11.2.1　地图中的Mashup应用　 　11.2.2　Ajax搜索请求　 　11.2.3　地图与搜索的Mashup...

    web开发基础教程

    控制语句 第九章 Javascript_函数.ppt 第十章 Javascript_核心对象.ppt 第十一章 Javascript_正则表达式.ppt 第十二章 Javascript_事件处理.ppt 第十三章 Javascript_DOM模型.ppt 第十四章 JavaScript_Window对象....

    JavaScript：DOM编程艺术（第2版）

    第3章 dom 32 3.1 文档：dom中的“d” 32 3.2 对象：dom中的“o” 32 3.3 模型：dom中的“m” 33 3.4 节点 35 3.4.1 元素节点 35 3.4.2 文本节点 35 3.4.3 属性节点 36 3.4.4 css 36 3.4.5 获取元素 38 ...

    [JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.part3.rar

    　第11章　丰富的Mashup！运用API添加地图、搜索及更多功能　 　11.1　API密钥　 　11.2　客户端API：离不开JavaScript　 　11.2.1　地图中的Mashup应用　 　11.2.2　Ajax搜索请求　 　11.2.3　地图与搜索的Mashup...

    疯狂HTML5\CSS3\JavaScript讲义-源代码

    第11章 表格、列表相关属性及media query 第12章 变形与动画相关属性 第三部分 第13章 JavaScript语法详解 第14章 DOM编程详解 第15章 事件处理机制 第16章 本地存储与离线应用 第17章 使用Worker创建多线程...

    [JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.part2.rar

    　第11章　丰富的Mashup！运用API添加地图、搜索及更多功能　 　11.1　API密钥　 　11.2　客户端API：离不开JavaScript　 　11.2.1　地图中的Mashup应用　 　11.2.2　Ajax搜索请求　 　11.2.3　地图与搜索的Mashup...

    Java基础课堂笔记

    Java基础笔记， 第一章：编程基础 第二章：数组 第三章：面向对象程序开发 第四章...网络编程 第十一章：反射机制 第十二章：正则表达式 第十三章：HTML语言 第十四章：CSS语言 第十五章：JavaScript语言 第十六章：DOM

    Web前端开发技术——HTML、CSS、JavaScript

    本书紧密结合互联网行业发展对Web前端开发工程师岗位的技术与能力的需求，详细介绍了HTML、CSS、DIV... 第11章表单； 第12章JavaScript基础； 第13章JavaScript事件分析； 第14章DOM和BOM； 第15章课程网站构建与发布。

    java各知识点详细总结(毕向东笔记整理)

    第十一章：反射机制 310 -315315315 第十二章：正则表达式 315 -322322322 第十三章：HTMLHTMLHTMLHTML语言 322 -335 335 335 335 335 335 335 335 335 第十四章：CSS CSS语言 335335335-341 341 341 341 341 341 ...

    毕向东 Java 课件

    毕向东 Java ...第十一章：反射机制 310-315 第十二章：正则表达式 315-322 第十三章：HTML语言 322-335 第十四章：CSS语言 335-341 第十五章：JavaScript 语言 341-375 第十六章：DOM 375-429

    jQuery开发技术详解

    第11章 jQuery与AJAX 第12章 回头重看jQuery——核心及工具 第13章 jQuery增强用户体验 第14章 jQuery中使用AJAX跨域操作 第15章 jQuery+PHP动态网站实践 第16章 jQuery键盘操作 第17章 jQuery可视化数据显示 本资料...

    完整版Java web开发教程PPT课件 Java开发进阶教程 第11章 AJAX实现（共11页）.pptx

    完整版Java web开发教程PPT课件 Java开发进阶教程 第11章 AJAX实现（共11页）.pptx 完整版Java web开发教程PPT课件 Java开发进阶教程 第12章 自定义mvc框架（共11页）.pptx 完整版Java web开发教程PPT课件 Java开发...

    Java基础详解（入门级）

    全书共16章，通俗易懂的语言...第十一章：反射机制 310-315 第十二章：正则表达式 315-322 第十三章：HTML 语言 322-335 第十四章：CSS 语言 335-341 第十五章：JavaScript 语言 341-375 第十六章：DOM 375-429

    第十一章 JSP中使用XML（新）1

    第十一章11.1 XML文件的基本结构11.3 标记11.4 DOM解析器11.5 SAX解析器本章主要内容如果Web应用没有用到数据库独有的一些特性，而仅仅是

    xml.rar_Recall_XML DOM_html_xml_xml dtd

    第七、八、九章，我们将讨论一些与XML相关的更深层次的内容，包括XML链接、XML DOM以及XML与数据库的连接。最后，在第十章，希望诸多网友和我们一起，仁者见仁，智者见智，共同为XML未来的应用和发展方向作一个前景...

    知乎大神萧井陌web前端课程

    第11章 面向对象、ajax、作业和代码思路 第12章 找工作基础、ajax作业、api封装 第13章 jQuery 常见用法、课程重点、常用组件例如弹窗的制作 第14章 作业讲解 第15章 log的要素、git和github、js的一些高级内容 bind...

Magicbox
Global site tag (gtag.js) - Google Analytics