当前位置：
文档之家› 第二章 JavaScript事件处理 JavaScript及网页特效制作课件
第二章 JavaScript事件处理 JavaScript及网页特效制作课件
//通过document.getElementById函数获取文本框对象
var curTxt = document.getElementById('txtResult');
//为文本框对象绑定onblur事件 curTxt.onblur = function() {
根据id获取页面组 件对象的方法
//this表示调用此函数的当前文本框对象
• JavaScript浏览器事件
– onload : 浏览器载入文档事件 – onunload : 关闭该文档事件 – onblur : 浏览器失去焦点事件 – onfocus : 获得焦点事件
2020/9/26
JavaScript事件处理
• HTML 文档将元素的常用事件,如onclick、 onmouseover 等,当作属性捆绑在HTML元素 上，当该元素的特定事件发生时，对应于此 特定事件的事件处理器就被执行，并将处理 结果返回给浏览器。事件捆绑导致特定的代 码放请实置现功在能其：文所档加处载完对毕象时弹的出对事话框件提示处“理文档器加载中完毕。”
alert('文档已经加载完毕！'); }
//此处可以省略函数小括号
调用函数 showMessage
window.onload = showMessage;
➢推荐使用js脚本和html文档分离的模式
2020/9/26
JavaScript事件应用-按 钮单击事件
为页面上现有的按钮各自绑定一个单击事件，弹出对话框 显示按钮的文本值。
绑定onblur事件 }
alert(this.value);
}
演示程序text.html
2020/9/26
课堂练习
• 练习使用文本框的onchange事件，当事件触 发时，弹出文本框内当前的值。
2020/9/26
JavaScript事件应用-下拉菜单change事件
为下拉菜单绑定onchange事件，并在页面输出当前选中项的文 本值。
2020/9/26
演示程序button.html
课堂练习
• 单击页面按钮，弹出提示框，用两种不同的 绑定方式实现。
2020/9/26
JavaScript事件应用-文本 框光标事件
为文本框绑定一个失去光标事件，弹出当前文本框中的内 容。
分析
• 文本框失去光标事件为onblur • 需获取当前文本框对象(使用
JavaScript事件处理
• 其他书写方式
<html><head><title>第一个JavaScript事件</title> <script type="text/javaScript"> function showMessage() {
定义函数 showMessage
alert('文档加载完毕！');
} </script> </head>
调用函数 showMessage
<body onload="showMessage();"></body></html>
演示程序first2.html
2020/9/26
JavaScript事件处理
• 其他书写方式
function showMessage() {//显式定义一个函数以备调用
//定义函数showValue并接受一个按钮对象参数 function showValue(btn) {
alert(btn.value); }
定义函数 showValue
传入this代表当前 按钮对象
调用方式：
<input type="button" value="按钮1" onclick="showValue(this);" /> <input type=“button” value=“按钮2” onclick=“showValue(this);” /> <input type="button" value="按钮3" onclick="showValue(this);" />
</select>result.innerHTML = html;
<}div id="result"></div><!--显示结果用的div-->
2020/9/26Biblioteka 演示程序select.html
总结
• 什么是事件？ • JavaScript如何处理事件？ • 按钮的常用事件有哪些，如何绑定？
2020/9/26
2020/9/26
JavaScript事件处理
////定HT义M了L文一档个加匿载名完函毕数后绑执定行到此on方lo法ad，事此件处中使。用functio匿n 名函数 window.onload = function() {
alert('文档已经加载完毕！'); }
2020/9/26
演示程序first.html
分析
• 需使用事件onchange • 需获取当前下拉菜单对象(使用
document.getElementById(‘下拉菜单id’)方 法获取)， • 使用下拉菜单对象.value属性获取当前选中 项的值。
2020/9/26
JavaScript事件应用-下拉菜单change事件
<//s定e义lec一t 个id=函"s数e处lec理t"oonncchhaannggee事=件"show(this);"> function<sohpotwio(nsevlaelcute)={"0">请选择</option>
HJtSm脚l脚本本代代码码
<voarptrieosnuvlta=ludeo=c"加um菲e猫nt."g>e加tE菲le猫m<e/notpBtyioIdn(>'result');
<voarpthiotmnlv=al'u你e选="择兔了八'哥+"s>e兔le八ct.哥va<l/uoep;tion>
<//o使p用tioinnvearlHuTe=M"L唐属老性鸭为"d>i唐v内老部鸭插</入op一tio段nh>tml代码
2020/9/26
本章案例
按钮单击事件 文本框光标事件 下拉菜单change事件
2020/9/26
本章目标
了解JavaScript事件含义 掌握JavaScript常用事件 掌握JavaScript事件绑定
2020/9/26
2020/9/26
2020/9/26
JavaScript常用事件
作业
2020/9/26
2020/9/26
document.getElementById(‘文本框id’)方 法获取)， • 使用文本框对象.value属性获取内部写入 的值。
2020/9/26
JavaScript事件应用-文本框光标事件
//这里需保证页面文档加载完毕，否则无法取得文本框文对档象加载完毕
window.onload = function() {
分析
1. 分析需要使用的事件，按钮单击事件为onclick 2. 根据需要决定事件的绑定方式，采用显式声明函数后手工绑定（所
有按钮需要处理的问题完全相同，均是弹出对话框显示当前按钮的 文本，可以采用绑定同一个函数的方式）。 3. 编写代码。
2020/9/26
JavaScript事件应用-按 钮单击事件
