1.5JavaScript事件处理

最新推荐文章于 2024-03-07 06:30:00 发布

SuperBetterMan

最新推荐文章于 2024-03-07 06:30:00 发布

阅读量214

点赞数

分类专栏：数据可视化与前端技术

本文链接：https://blog.csdn.net/SuperBetterMan/article/details/105628783

版权

数据可视化与前端技术专栏收录该内容

15 篇文章 1 订阅

订阅专栏

每个标记都可以引发某个事件，XHTML可以将事件对象作为标记的属性，并与JavaScript函数配合使用，事件发生时自动调用函数或执行JavaScript代码实现对页面操作。
标记元素响应事件的传统写法：
<标记名事件属性名称＝"函数名( [参数1, 参数2, …] ) 或 JavaScript代码" >
如果代码较少可直接在事件属性中书写代码，但不推荐这种方式，目前流行的网页制作技术，即使调用事件函数也不在标记中使用事件属性，只为标记设置id属性，所要响应的各种事件名称及调用的事件函数全部在JavaScript文件中设置。
注意：事件发生时JavaScript会自动创建一个event对象，该对象封装了引发事件的所有状态与参数，通过event对象可以获取引发事件的事件源对象、鼠标左键或右键及点击次数以及鼠标按下点的坐标、按下了键盘的哪个按键等。

1.页面相关事件：页面相关事件一般由window浏览器对象或body对象响应。

onload 页面内容加载完成，包括外部文件引入完成
onunload 用户改变页面卸载当前页面前或关闭浏览器后
onmove 移动浏览器窗口(onmovestart、onmoveend)
onresize 调整浏览器窗口或框架大小(onresizestart、onresizeend)
onerror 加载页面或图像错误，如脚本错误与外部数据引用的错误
onabort 加载图像被用户中断或取消
onstop 按下浏览器停止按钮或者正下载的文件被中断
onscroll 浏览器滚动条位置发生变化
onbeforeunload 当前页面内容被改变之前(关闭浏览器之前)

注意：onunload事件现在已不主流浏览器被兼容
2.鼠标相关事件：鼠标相关事件可以由页面中任意标记对象响应。
onclick 鼠标单击（在某个标记对象控制的范围内）

ondblclick 鼠标双击
onmousedown 鼠标按下（一般用于按钮或超链接对象）
onmouseup 鼠标松开（一般用于按钮或超链接对象）
onmouseover 鼠标移到元素上(进入某个标记对象控制范围内)
onmouseout 鼠标从元素移开(脱离某个标记对象的控制范围)
onmousemove 鼠标在元素内控制范围移动

3．键盘相关事件：键盘相关事件可以由页面中任意标记对象响应，但必须获得焦点才能响应键盘事件。

onkeydown 某个键被按下时
onkeyup 某个键松开释放时
onkeypress 键盘上的某个键被敲击（按下并释放）

4．表单相关事件：表单相关事件一般由表单元素响应，可配合表单元素对表单数据进行验证。

onfocus 元素获得焦点(也可用于其他标记，鼠标与键盘操作均可触发)
onblur 元素失去焦点(也可用于其他标记，鼠标与键盘操作均可触发)
onchange 文本内容被改变—在失去焦点时触发
onsubmit 单击提交按钮提交表单时触发(必须由form标记响应)
onreset 单击重置按钮时触发（必须由form标记响应）

这是4类较为常用的事件，此外还有页面编辑事件、滚动字幕事件、数据绑定事件、外部事件

页面相关事件与函数记忆调用

页面相关事件一般由window浏览器对象或body对象响应
onload是浏览器装载打开页面包括引入外部文件完毕后触发的事件，假设为onload事件定义一个initDocument函数：传统经典设计方法：一般让标记响应onload事件：

 <body onload="initDocument( )"> ............ </body>

现在流行设计方法：全部由JavaScript代码完成，通过window浏览器对象响应onload事件及其他页面事件。

  window.onload=initDocument;   //只有函数名没有()括号，即记忆调用

执行这条语句只是将函数名交给window对象的onload事件，让window对象记住onload事件发生时所要调用的函数名，其含义是“当发生onload事件时调用的函数是initDocument()”。
如果写成 window.οnlοad=initDocument(); 则装载JavaScript时立即调用函数，而此时页面内容还没装载，浏览器尚不知道页面中有哪些标记，如果在函数中操作页面元素则会出错。
window是浏览器最顶层全局对象，对象名window可以省略。

onunload事件与匿名函数的记忆调用

某些浏览器会缓存页面内容，用“后退”按钮返回已装载过的页面时则只显示缓存的内容而不再触发onload事件，如果是在onload事件函数中设置标记对象的事件操作，则这些操作用“后退”按钮返回后也会失效。
当浏览器窗口转换新页面或关闭浏览器时会触发onunload事件，通过onunload事件函数则可以避免页面缓存、还可以清理资源、显示退出提示信息。
假若：卸载页面事件函数为 function exitDocument() { 函数体语句 }
window.onunload=exitDocument; 可记忆函数名在事件发生时调用
使用匿名函数同样具有函数的记忆调用功能，即执行该语句时不立即调用函数，而是记忆函数在事件发生时调用。
window.οnunlοad=function() { 函数体语句 }
如果不需要清理资源、也不需要显示退出提示信息，可调用匿名空函数避免页面缓存，以便在再次返回时能自动触发onload事件。