`
xuedong
  • 浏览: 298905 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript中的事件处理

阅读更多

事件处理概述
   事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。事件的处理程序可以是任意 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="http://www.a.com" onclick="return 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 对象
  • 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 对象

转自:http://www.ijavascript.cn/jiaocheng/javascript-event-handling-85.html

分享到:
评论

相关推荐

    JavaScript 事件处理 事件绑定 示例代码

    JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件...

    JavaScript程序设计——事件处理实验报告.docx

    实验报告详细介绍了JavaScript事件处理的相关知识,这在Web开发中是非常关键的一部分,因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明: 1. **JavaScript事件基本概念**: - **事件**:是用户...

    第6章 JavaScript中的事件与事件处理

    第6章 JavaScript中的事件与事件处理

    JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码

    JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例...

    Javascript_事件处理

    Javascript_事件处理,讲解了JAVASCRIPT事件开发中注意的事项,步骤,有条理的讲解

    JavaScript 事件处理 二级菜单级联 示例代码

    JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...

    JavaScript 事件处理 下拉列表和可选项 示例代码

    JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 ...

    javascript 讲义_01_事件结束

    "javascript 讲义_01_事件结束"这个主题聚焦于JavaScript中的事件处理,特别是事件结束相关的概念。在这个讲义中,我们将深入探讨事件模型、事件冒泡、事件捕获以及如何正确地结束或清理事件。 事件是用户与网页...

    JavaScript程序设计课件:第 5 章 事件和事件处理.ppt

    JavaScript 中的事件处理 JavaScript 提供了多种方式来处理事件,例如使用 HTML 属性指定事件处理器,或者使用 JavaScript 属性指定事件处理器。 使用 HTML 属性指定事件处理器的优点是简洁明了,但缺点是混合了 ...

    JavaScript 的事件处理

    JavaScript 的事件处理

    探究JavaScript中的五种事件处理程序方式

    在JavaScript中,事件处理程序是用于响应用户或浏览器行为的函数。本文将详细阐述JavaScript中的五种事件处理程序方式,帮助开发者更好地理解和使用这些机制。 1. HTML事件处理程序 这是最基础的事件处理方式,通过...

    JavaScript 趣味案例-事件处理-dom操作表格 示例代码

    JavaScript 事件处理 示例代码 包含表格表单创建、样式设置、事件绑定(表格、表单、复选框)、事件处理 JavaScript 事件处理 示例代码 包含表格表单创建、样式设置、事件绑定(表格、表单、复选框)、事件处理...

    javascript表单事件处理方法详解.docx

    javascript 表单事件处理方法是指在表单中使用 javascript 语言来处理用户的输入信息,并对其进行验证和处理的方法。这些方法可以帮助开发者更好地控制表单的行为,提高用户体验和数据安全。 1. 访问表单对象的常用...

    探究JavaScript中的五种事件处理程序1

    JavaScript中的事件处理程序是实现网页交互的核心机制,允许开发者对用户的动作或浏览器的行为做出响应。在JavaScript中,主要存在五种事件处理方式,分别是HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理...

    真正的高手,都是一套“方法论”搞定一堆工作.pdf

    事件被看作是JavaScript与网页之间交互的桥梁,当事件发生时,可以通过JavaScript 代码执行相关的操作。例如,用户可以通过鼠标拖曳登录框、改变登录框的显示位置、单击...今天我们就来学习JavaScript中事件处理机制。

    实验项目二十二  javascript事件处理.doc

    JavaScript 事件处理是 JavaScript 编程语言中的一种机制,用于响应用户的交互行为,如鼠标单击、键盘输入、浏览器加载等。通过事件处理,开发者可以创建更加交互、动态的 Web 应用程序。 在本实验项目中,我们将...

    使用webview加载本地html页面,并处理html页面中的javascript事件

    这篇博文“使用webview加载本地html页面,并处理html页面中的javascript事件”探讨了如何利用WebView来加载本地HTML文件,并且如何处理HTML页面中的JavaScript事件,这对于创建混合型应用或实现特定功能(如在原生...

    第3章+JavaScript事件处理.pdf

    ### JavaScript事件处理详解 #### 一、事件与事件处理概览 在JavaScript编程中,**事件**被视为用户与网页互动的桥梁,它们涵盖了从简单的鼠标移动到复杂的拖拽操作等一系列行为。事件处理则是指通过JavaScript...

    javaScript对象模型与事件处理借鉴.pdf

    这些事件对象都继承自 Event 对象,Event 对象是 JavaScript 事件处理中的基本对象。 JavaScript 对象模型与事件处理是 JavaScript 编程的两个核心概念。JavaScript 对象模型描述了对象之间的层次关系,而事件处理...

Global site tag (gtag.js) - Google Analytics