JavaScript中的事件处理

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

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

让咱们来看看例子:小程序

<body ... onunload="alert('再见!')">

这样的定义<body>标记,能使文档读取完毕的时候弹出一个对话框,写着“网页读取完成,请慢慢欣赏”;在用户退出文档(或者关闭窗口,或者到另外一个页面去)的时候弹出“再见”。
方法二 编写特定对象特定事件的 JavaScript。这种方法用得比较少,可是在某些场合仍是很好用的。方法是:浏览器

<script language="JavaScript" for="对象" event="事件">
...
(事件处理程序代码)
...
</script>
<script language="JavaScript" for="window" event="onload">
  alert('网页读取完成,请慢慢欣赏!');
</script>

方法三 在 JavaScript 中说明。方法:ide

<事件主角 - 对象>.<事件> = <事件处理程序>;

用这种方法要注意的是,“事件处理程序”是真正的代码,而不是字符串形式的代码。若是事件处理程序是一个自定义函数,如无使用参数的须要,就不要加“()”。函数

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" false">Go!</a>,那么不管用户怎样点击,都不会去到 www.a.com 网站,除非用户禁止浏览器运行 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 对象
     
  • 事件 发生在用户把鼠标放在对象上按下鼠标键的时候。参考 事件。应用于:Button 对象;Link 对象
     
  • 事件 发生在鼠标离开对象的时候。参考 事件。应用于:Link 对象
     
  • 事件 发生在鼠标进入对象范围的时候。这个事件和 事件,再加上图片的预读,就能够作到当鼠标移到图像链接上,图像更改的效果了。有时咱们看到,在指向一个链接时,状态栏上不显示地址,而显示其它的资料,看起来这些资料是能够随时更改的。它们是这样作出来的:
    <a href="..." onmouseover="window.status='Click Me Please!'; return true;" onmouseout="window.status=''; return true;">
    应用于:Link 对象
     
  • 事件 发生在用户把鼠标放在对象上鼠标键被按下的状况下,放开鼠标键的时候。若是按下鼠标键的时候,鼠标并不在放开鼠标的对象上,则本事件不会发生。应用于:Button 对象;Link 对象
     
  • onreset 事件 发生在表单的“重置”按钮被单击(按下并放开)的时候。经过在事件处理程序中返回 false 值(return false)能够阻止表单重置。应用于:Form 对象
     
  • onresize 事件 发生在窗口被调整大小的时候。应用于:window 对象
     
  • onsubmit 事件 发生在表单的“提交”按钮被单击(按下并放开)的时候。可使用该事件来验证表单的有效性。经过在事件处理程序中返回 false 值(return false)能够阻止表单提交。应用于:Form 对象
     
  • onunload 事件 发生在用户退出文档(或者关闭窗口,或者到另外一个页面去)的时候。与 onload 同样,要写在 HTML 中就写到<body>标记里。  有的 Web Masters 用这个方法来弹出“调查表单”,以“强迫”来者填写;有的就弹出广告窗口,挑拨来者点击链接。我以为这种“onunload="open..."”的方法很很差,有时甚至会由于弹出太多窗口而致使资源缺少。有什么对来者说就应该在网页上说完,不对吗? 应用于:window 对象  
相关文章
相关标签/搜索