①简介
事件是一些可以通过脚本响应的页面动作。
当用户按下鼠标键或者提交一个表单，甚至在页面上移动鼠标时，事件就会出现。绝大多数事件的命名是描述性的，很容易理解，例如Click、Submit、MouseOver等，通过名称就可以猜测其含义。例子：
在同一目录下创建js外部文件
window.οnunlοad=function() { } //记忆匿名函数，避免页面缓存
window.οnlοad=initBody; //记忆页面装载完成事件处理函数
function initBody() //必须在onload函数内为HTML标记设置事件函数
{ document.body.οnmοusedοwn=bc1; //body记忆事件函数
document.body.οnmοuseup=bc2; //对其他标记可通过id获取
document.body.οndblclick=bc3;
}
function bc1() { this.style.backgroundColor='blue'; } //纯JavaScript调用函数内可直接用this表示当前调用对象
function bc2() { this.style.backgroundColor='red'; }
function bc3() { this.style.backgroundColor='#FFF'; }
②主要句柄
③事件处理的三种方式：
当一个事件发生时，如果需要截获并处理该事件，只需要定义该事件的事件句柄所关联的事件处理代码，
具体的处理方式有以下3种：
>在HTML标记中静态指定的处理方式、在JavaScript中的动态指定处理方式及特定对象的特定事件处理方式。
在HTML标记中的静态指定
<HTML标记 ... 事件句柄1="事件处理程序" [事件句柄2 = "事件处理程序" ...]>
</HTML标记>
即
<input type="button" value="直接通过JS语句输出信息" οnclick="alert('单击按钮')">
<input type="button" value="直接通过JS语句输出信息" οnclick="show（）">
————————————————————————————————————————
> 事件处理程序在JavaScript中动态指定。
格式：<事件主角-对象>.<事件>=<事件处理程序>;
“事件处理程序”是真正的代码，而不是字符串形式的代码。
<body>
<form name="myform" method="post" action="" >
<input id="input" type="submit" name="mysubmit" value="提交" οnclick="return clickHandler()"> </form>
<script type="text/javascript">
function clickHandler()
{ alert("即将提交表单"); return true; }
myform.mysubmit.onclick(); --人为代码触发事件 代码触发了点击事件
</script>
</body>
————————————————————————————————————————
> 编写特定对象的特定事件的中指定
<script type=“text/javascript”for=“对象”event=“事件”>
//事件处理程序代码
</script>
<script type=“text/javascript”for=“window”event=“onload”>
alert(“网页读取完成，欢迎光临！”); --没有写function 办法名（）｛内容..｝，直接内容
</script>
④表单事件
表单是Web应用中和用户进行交互的最常用工具，用户注册、发表文章和评论等都需要用到表单。用户在表单中填写数据，然后将数据发送到服务器端。
JavaScript脚本所要做的主要工作就是表单验证，如验证用户是否有未填信息，输入的数据格式是否正确等等。
表单中的Submit事件触发后会将表单中的数据提交到服务器端，
Reset事件触发后会将表单中的数据重置为初始值。
在表单中，可以通过将<input>元素的type属性值设置为”submit”来得到一个表单提交按钮，当点击该按钮时会触发表单的Submit事件 。
通过将<input>元素的type属性值设置为”reset”来得到一个表单重置按钮，当点击该按钮时会触发表单的Reset事件。
当表单中的text或textarea元素的文字被选择后会触发Select选择事件。
⑤鼠标事件
鼠标点击事件主要指用鼠标对页面中的元素进行单击及双击操作时触发的事件，它们也是网页开发中运用最多的事件，
当鼠标单击页面中的按钮时可以触发鼠标单击事件，
例如<input type="button" name="click" value="鼠标单击" onClick="alert('你单击了我 !')">
当鼠标双击页面中的按钮时可以触发鼠标单击事件，例如<input type="button" name="click" value="鼠标双击" onDblClick="alert('你双击了我 !')">
⑥键盘事件
鼠标点击某个元素时该元素获得焦点，其他元素获得焦点时该元素随即失去焦点，获得焦点的元素还可以响应按键事件。
常用的焦点、按键及表单事件有
>onfocus 获得焦点
>onblur 失去焦点
>onchange 内容被改变（失去焦点时触发）、
>onsubmit 提交表单
>onreset 重置表单
>onkeydown 键按下
>onkeyup 键释放
>onkeypress 敲击按键（包括键按下、键释放，响应顺序为按下、敲击、释放）。
表单元素还可响应onselect选中文本、oncopy复制、oncut剪切、onpaste粘贴等页面编辑事件。
注意：onsubmit提交表单、onreset重置表单事件必须由<form>标记响应，返回false可终止提交或重置表单，而submit提交按钮、reset重置按钮只能响应单击事件，返回false同样可终止提交或重置表单。
————————————————————————————————
焦点、按键及表单事件应用技巧：
（1）表单元素内容不允许修改可设置其只读属性，对不支持只读的浏览器可对该元素附加onfocus获得焦点事件强迫离开。
（2）利用onblur失去焦点事件可在用户离开时对数据进行验证，不符合要求可显示错误提示信息并自动重新获得焦点。
（3）window浏览器窗口对象响应onfocus获得焦点事件可以迫使一个窗口总在其他窗口背后，必须等其他窗口都最小化或关闭后该窗口才可以浏览。
window.οnfοcus=moveBack; //window事件无需在函数中
function moveBack() { self.blur(); } //获得焦点时重新失去焦点
（4）window对象响应onblur失去焦点事件可以使一个窗口总在其他窗口前面。
window.οnblur=moveUp;
function moveUp() { self.focus(); } //失去焦点时重新获得焦点
IE浏览器实际运行时如果打开的其他窗口在前面，则该窗口在屏幕状态栏中的图标先闪动然后显示为突出颜色以提醒用户。
⑦窗口事件
窗口事件是指浏览器窗口在加载页面或卸载页面时触发的事件。加载页面时会触发Load事件，卸载页面时会触发UnLoad事件，这两个事件和<body>及<frameset>两个页面元素有关。
❤ 页面相关事件与函数的记忆调用
页面相关事件一般由window浏览器对象或body对象响应。
1．onload事件与函数的记忆调用
onload是浏览器装载打开页面包括引入外部文件完毕后触发的事件，假设为onload事件定义一个initDocument函数：
function initDocument() { //页面装载完毕后执行的代码; }
传统设计方法一般让<body>标记响应onload事件：
<body οnlοad="initDocument()">
现在流行设计方法全部由JavaScript代码完成，通过window浏览器对象响应onload及其他页面事件：
window.οnlοad=initDocument; //只有函数名没有()括号
执行这条语句只是将函数名交给window对象的onload事件，让window对象记住onload事件发生时所要调用的函数名，其含义是“当发生onload事件时调用的函数是initDocument()”。
如果写成 window.οnlοad=initDocument(); 则装载JavaScript时立即调用函数，而此时页面内容还没装载，浏览器尚不知道页面中有哪些标记，如果在函数中操作页面元素则会出错。
window是浏览器最顶层全局对象，对象名window可以省略。
注意：页面中直接书写的JavaScript代码在页面装载时立即执行，刷新页面重新执行这些代码则可能因为使用了全局变量而出现错误，可以将这些代码放在onload事件函数中，既可保证加载页面时执行，又可避免出现意外错误。
———————————————————————————————————————————
onunload事件与匿名函数的记忆调用
某些浏览器会缓存页面内容，用“后退”按钮返回已装载过的页面时则只显示缓存的内容而不再触发onload事件，如果是在onload事件函数中设置标记的事件操作，则这些操作用“后退”按钮返回后也会失效。
当浏览器窗口转换新页面或关闭浏览器时会触发onunload事件，通过onunload事件函数则可以避免页面缓存、还可以清理资源、显示退出提示信息。
若卸载页面事件函数为： function exitDocument() { }
window.οnunlοad=exitDocument; 可记忆函数名在事件发生时调用
使用匿名函数同样具有函数的记忆调用功能，即执行该语句时不立即调用函数，而是记忆函数在事件发生时调用。
window.οnunlοad=function() { }
如果不需要清理资源、显示退出提示信息，可调用匿名空函数避免页面缓存，以便在再次返回时能自动触发onload事件。
现在流行的设计方法在HTML页面中不再出现哪个标记响应哪个事件调用哪个函数及代码，全部由onload与onunload事件完成，而且使用标记对象也无需传递参数。
1225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
