JS技术

JavaScript入门教程(四)_javascript教程教程

字号+ 作者:H5之家 来源:H5之家 2015-10-10 14:19 我要评论( )

JavaScript入门教程(四),学习JavaScript入门教程(四),JavaScript入门教程(四),查看JavaScript入门教程(四),javascript文字教程,视频教程学习园地:提供相关特效


文章添加日期:2005-9-18     观看人数:1224

 
事件处理
事件处理概述

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


指定事件处理程序

  指定事件处理程序有三种方法:


方法一 直接在 HTML 标记中指定。这种方法是用得最普遍的。方法是:



<标记 ... ... 事件="事件处理程序" [事件="事件处理程序" ...]>



让我们来看看例子:



<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="" 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>标记里。


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JavaScript入门教程(二)_javascript教程教程

    JavaScript入门教程(二)_javascript教程教程

    2015-10-10 14:25

  • JavaScript入门教程(五)_javascript教程教程

    JavaScript入门教程(五)_javascript教程教程

    2015-10-10 14:21

  • JavaScript入门教程(三)_javascript教程教程

    JavaScript入门教程(三)_javascript教程教程

    2015-10-10 14:17

  • JavaScript入门教程(一)_javascript教程教程

    JavaScript入门教程(一)_javascript教程教程

    2015-10-10 14:15

网友点评