JavaScript入门教程(11)js事件处理资源-CSDN下载

47 浏览量 2020-11-30 20:13:53 上传评论收藏 73KB PDF 举报

事件处理概述　　事件处理是对象化编程的一个很重要的环节，没有了事件处理，程序就会变得很死，缺乏灵活性。事件处理的过程可以这样表示：发生事件 – 启动事件处理程序 – 事件处理程序作出反应。其中，要使事件处理程序能够启动，必须先告诉对象，如果发生了什么事情，要启动什么处理程序，否则这个流程就不能进行下去。事件的处理程序可以是任意 JavaScript 语句，但是我们一般用特定的自定义函数（function）来处理事情。指定事件处理程序有三种方法：方法一直接在 HTML 标记中指定。这种方法是用得最普遍的。方法是：代码如下:<标记 … … 事件=”事件处理程序” [事件=”事件处理程序” JavaScript事件处理是编程中至关重要的一个部分，它赋予了网页动态性和交互性。在JavaScript中，事件处理涉及到了用户与网页元素之间的互动，比如点击按钮、输入数据等。当一个事件发生时，JavaScript会执行相应的事件处理程序，对事件做出响应。事件处理程序通常是一个函数，用于处理特定事件。指定事件处理程序有三种方法： 1. **方法一：在HTML标记中直接指定**。这是最常见的方式，通过在HTML元素中添加事件属性，例如`onload`、`onclick`等，后面跟上处理程序的函数名。例如： ```html <body onload="alert('网页读取完成，请慢慢欣赏！')" onunload="alert('再见！')"> ``` 这样，当页面加载完毕或关闭时，对应的警告框会被显示。 2. **方法二：编写特定对象特定事件的JavaScript**。这种方式相对较少用，但有时非常有用。例如： ```html <script language="JavaScript" for="window" event="onload"> alert('网页读取完成，请慢慢欣赏！'); </script> ``` 这里，事件处理程序被直接写在`<script>`标签中，并且指定了针对`window`对象的`onload`事件。 3. **方法三：在JavaScript中说明**。这种方式更灵活，可以在JavaScript代码中动态绑定事件处理程序。例如： ```javascript window.onerror = ignoreError; ``` 这里，`ignoreError`函数被设置为`window`对象的`onerror`事件处理程序，用于处理错误。事件处理的常见事件包括： - `onblur`：当元素失去焦点时触发。 - `onchange`：当输入字段的内容改变且焦点离开该字段时触发，常用于实时验证输入。 - `onclick`：当用户单击元素时触发，常用于按钮或链接的交互。 - `onerror`：在脚本运行时遇到错误时触发，可以用于错误处理。 - `onfocus`：当元素获得焦点时触发。 - `onload`：当整个页面或指定资源加载完成时触发。例如，`onclick`事件可用于按钮，改变表单的行为，而`onerror`事件可以设置错误处理程序，决定如何处理错误。在链接的`onclick`事件中返回`false`可以阻止默认的链接行为，如防止跳转到新页面。了解并熟练掌握JavaScript的事件处理机制，对于创建交互丰富的网页和应用程序至关重要。通过合理运用事件处理，开发者能够创建出更加智能、用户友好的Web应用。

资源详情

资源评论

资源推荐

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

事件处理概述事件处理概述

　　事件处理是对象化编程的一个很重要的环节，没有了事件处理，程序就会变得很死，缺乏灵活性。事件处理的过程可以

这样表示：发生事件 – 启动事件处理程序 – 事件处理程序作出反应。其中，要使事件处理程序能够启动，必须先告诉对象，

如果发生了什么事情，要启动什么处理程序，否则这个流程就不能进行下去。事件的处理程序可以是任意 JavaScript 语句，

但是我们一般用特定的自定义函数（function）来处理事情。

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

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

代码如下:

<标记 … … 事件=”事件处理程序” [事件=”事件处理程序” …]>

让我们来看看例子：

代码如下:

这样的定义<body>标记，能使文档读取完毕的时候弹出一个对话框，写着“网页读取完成，请慢慢欣赏”；在用户退出文档（或

者关闭窗口，或者到另一个页面去）的时候弹出“再见”。

方法二方法二编写特定对象特定事件的编写特定对象特定事件的 JavaScript。。这种方法用得比较少，但是在某些场合还是很好用的。方法是：

代码如下:

…

(事件处理程序代码)

…

</script>

代码如下:

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 对

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈

weixin_38693084

粉丝: 4

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

评论0

最新资源

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

评论0

JavaScript入门教程

javascript入门教程

Javascript 入门教程

JS入门教程 javascript教程

javascript基础教程 从入门到精通

JavaScript入门教程(清晰PDF)

JavaScript入门教程_适合初学者

JavaScript基础入门教程（完整版）.ppt

JavaScript入门教程(适合新手)

Javaｓｃｒｉｐｔ入门教程PPT集

JavaScript入门教程--书籍（pdf）

JavaScript使用详解，javascript入门教程

JavaScript基础教程（pdf版）

javascript 原创入门教程（ppt格式）

JavaScript入门教程(初学者不可多得的优秀入门教材,通俗易懂,专业术语通俗化).doc

Javascript入门教程学习

javascript入门教程 带源码

JavaScript入门教程1

javascript入门教程(共有8章pdf格式)

JavaScript入门教程（含源文件）

JavaScript实例教程(经典的JS入门教程) pdf扫描版(带书签)

Javascript基础入门教程(pdf清晰版)

javascript入门教程 JavaScript使用手册.zip

JavaScript最佳入门教程(中文版)

[JavaScript] JavaScript 入门教程 (英文版)

javascript入门视频教程（比较不错的）

JS/javaScript入门教程套装，内含3本js入门资料-Part2/2

Android - 开发首屏广告(Android)简述

百度地图标记js

最新资源

javascript基础教程从入门到精通

javascript入门教程带源码