JavaScript入门教程(11):事件处理

2016-02-20 00:55 4 1 收藏

下面这个JavaScript入门教程(11):事件处理教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

事件处理概述
   事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。事件的处理程序可以是任意 JavaScript 语句,但是我们一般用特定的自定义函数(function)来处理事情。
指定事件处理程序有三种方法:
方法一 直接在 HTML 标记中指定。这种方法是用得最普遍的。方法是:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)标记 ... ... 事件="事件处理程序" [事件="事件处理程序" ...]
让我们来看看例子:body ... onload="alert('网页读取完成,请慢慢欣赏!')" onunload="alert('再见!')"
这样的定义body标记,能使文档读取完毕的时候弹出一个对话框,写着网页读取完成,请慢慢欣赏;在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候弹出再见。
方法二 编写特定对象特定事件的 JavaScript。这种方法用得比较少,但是在某些场合还是很好用的。方法是:script language="JavaScript" for="对象" event="事件"
...
(事件处理程序代码)
...
/script

script language="JavaScript" for="window" event="onload"
  alert('网页读取完成,请慢慢欣赏!');
/script

方法三 在 JavaScript 中说明。方法:事件主角 - 对象.事件 = 事件处理程序;
用这种方法要注意的是,事件处理程序是真正的代码,而不是字符串形式的代码。如果事件处理程序是一个自定义函数,如无使用参数的需要,就不要加()。function ignoreError() {
  return true;
}
window.onerror = ignoreError; // 没有使用()

这个例子将 ignoreError() 函数定义为 window 对象的 onerror 事件的处理程序。它的效果是忽略该 window 对象下任何错误(由引用不允许访问的 location 对象产生的没有权限错误是不能忽略的)。

事件详解

onblur 事件 发生在窗口失去焦点的时候。应用于:window 对象
onchange 事件 发生在文本输入区的内容被更改,然后焦点从文本输入区移走之后。捕捉此事件主要用于实时检测输入的有效性,或者立刻改变文档内容。应用于:Password 对象;Select 对象;Text 对象;Textarea 对象
onclick 事件 发生在对象被单击的时候。单击是指鼠标停留在对象上,按下鼠标键,没有移动鼠标而放开鼠标键这一个完整的过程。一个普通按钮对象(Button)通常会有 onclick 事件处理程序,因为这种对象根本不能从用户那里得到任何信息,没有 onclick 事件处理程序就等于废柴。按钮上添加 onclick 事件处理程序,可以模拟另一个提交按钮,方法是:在事件处理程序中更改表单的 action, target, encoding, method 等一个或几个属性,然后调用表单的 submit() 方法。在 Link 对象的 onclick 事件处理程序中返回 false 值(return false),能阻止浏览器打开此连接。即,如果有一个这样的连接:a href="http://www.a.com" onclick="return false"Go!/a,那么无论用户怎样点击,都不会去到 网站,除非用户禁止浏览器运行 JavaScript。应用于:Button 对象;Checkbox 对象;Image 对象;Link 对象;Radio 对象;Reset 对象;Submit 对象
onerror 事件 发生在错误发生的时候。它的事件处理程序通常就叫做错误处理程序(Error Handler),用来处理错误。上边已经介绍过,要忽略一切错误,就使用:function ignoreError() {
  return true;
}
window.onerror = ignoreError;

应用于:window 对象
onfocus 事件 发生在窗口得到焦点的时候。应用于:window 对象
onload 事件 发生在文档全部下载完毕的时候。全部下载完毕意味着不但 HTML 文件,而且包含的图片,插件,控件,小程序等全部内容都下载完毕。本事件是 window 的事件,但是在 HTML 中指定事件处理程序的时候,我们是把它写在body标记中的。应用于:window 对象
onmousedown 事件 发生在用户把鼠标放在对象上按下鼠标键的时候。参考 onmouseup 事件。应用于:Button 对象;Link 对象
onmouseout 事件 发生在鼠标离开对象的时候。参考 onmouseover 事件。应用于:Link 对象
onmouseover 事件 发生在鼠标进入对象范围的时候。这个事件和 onmouseout 事件,再加上图片的预读,就可以做到当鼠标移到图像连接上,图像更改的效果了。有时我们看到,在指向一个连接时,状态栏上不显示地址,而显示其它的资料,看起来这些资料是可以随时更改的。它们是这样做出来的:a href="..." onmouseover="window.status='Click Me Please!'; return true;" onmouseout="window.status=''; return true;"
应用于:Link 对象
onmouseup 事件 发生在用户把鼠标放在对象上鼠标键被按下的情况下,放开鼠标键的时候。如果按下鼠标键的时候,鼠标并不在放开鼠标的对象上,则本事件不会发生。应用于:Button 对象;Link 对象
onreset 事件 发生在表单的重置按钮被单击(按下并放开)的时候。通过在事件处理程序中返回 false 值(return false)可以阻止表单重置。应用于:Form 对象
onresize 事件 发生在窗口被调整大小的时候。应用于:window 对象
onsubmit 事件 发生在表单的提交按钮被单击(按下并放开)的时候。可以使用该事件来验证表单的有效性。通过在事件处理程序中返回 false 值(return false)可以阻止表单提交。应用于:Form 对象
onunload 事件 发生在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候。与 onload 一样,要写在 HTML 中就写到body标记里。  有的 Web Masters 用这个方法来弹出调查表单,以强迫来者填写;有的就弹出广告窗口,唆使来者点击连接。我觉得这种onunload="open..."的方法很不好,有时甚至会因为弹出太多窗口而导致资源缺乏。有什么对来者说就应该在网页上说完,不对吗? 应用于:window 对象

来源:https://www.tulaoshi.com/n/20160220/1632824.html

延伸阅读
标签: Web开发
Document文档对象是JavaScript中window和frames对象的一个属性,是显示于窗口或框架内的一个文档。描述当前窗口或指定窗口对象的文档。它包含了文档从head到/body的内容。 用法:document (当前窗口) 或 窗口对象.document (指定窗口) 属性: document.title //设置文档标题等价于HTML的title标签 document.bgColor //设置页面背景色 ...
标签: Web开发
JavaScript中的Window窗口对象 他是JavaScript中最大的对象,它描述的是一个浏览器窗口。一般要引用它的属性和方法时,不需要用window.xxx这种形式,而直接使用xxx。一个框架页面也是一个窗口。 Window窗口对象有如下属性: name 窗口的名称,由打开它的连接(a target="...")或框架页(frame name="...")或某一...
标签: Web开发
JavaScript 参考教程 本教程为未接触过 JavaScript 的读者提供了比较完善的初级知识,但只限于初级知识:所有与动态网页密切相关的 JavaScript 在本教程中都未提及,包括动态定位、动画、让文档接收更多事件(document.captureEvent())等;所有在 IE 及 Netscape 中有不同的 JavaScript 都尽少提及。 本教程在结构上设计的比...
标签: Web开发
这是基本JavaScript的屏幕对象 screen 屏幕对象 反映了当前用户的屏幕设置。 width 返回屏幕的宽度(像素数)。 height 返回屏幕的高度。 availWidth 返回屏幕的可用宽度(除去了一些不自动隐藏的类似任务栏的东西所占用的宽度)。 availHeight 返回屏幕的可用高度。 colorDepth 返回当前颜色设置所用的位数 - 1:黑白;8:256色;16:增...
标签: Web开发
单击事件onClick 当用户单击鼠标按钮时,产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons(重要按钮) submit buttons(提交按钮) 一切文本和图片 例:可通过下列按钮激活alert(): html head /he...

经验教程

612

收藏

32
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部