JavaScript 中的事件教程

2016-02-19 10:04 0 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发 】

事件是可以被JavaScript侦测到的行为。
事件
JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。

网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说,我们可以在用户点击某按钮时产生一个onClick事件来触发某个函数。事件在HTML页面中定义。

事件举例:
鼠标点击 
页面或图像载入 
鼠标悬浮于页面的某个热点之上 
在表单中选取输入框 
确认表单 
键盘按键 
注意:事件通常与函数配合使用,当事件发生时函数才会执行。

如果需要更全面的关于Javascript可识别的事件的知识,请阅读我们的完整版《事件参考手册》。
onload 和 onUnload
当用户进入或离开页面时就会触发onload 和 onUnload事件。

onload事件常用来检测访问者的浏览器类型和版本,然后根据这些信息载入特定版本的网页。

onload 和 onUnload事件也常被用来处理用户进入或离开页面时所建立的cookies。例如,当某用户第一次进入页面时,你可以使用消息框来询问用户的姓名。姓名会保存在cookie中。当用户再次进入这个页面时,你可以使用另一个消息框来和这个用户打招呼:"Welcome John Doe!"。
onFocus, onBlur 和 onChange
onFocus、onBlur和onChange事件通常相互配合用来验证表单。

下面是一个使用onChange事件的例子。用户一旦改变了域的内容,checkEmail()函数就会被调用。

input type="text" size="30" id="email" onchange="checkEmail()"onSubmit
onSubmit用于在提交表单之前验证所有的表单域。

下面是一个使用onSubmit事件的例子。当用户单击表单中的确认按钮时,checkForm()函数就会被调用。假若域的值无效,此次提交就会被取消。checkForm()函数的返回值是true或者false。如果返回值为true,则提交表单,反之取消提交。

form method="post" action="xxx.htm" onsubmit="return checkForm()"onMouseOver 和 onMouseOut
onMouseOver 和 onMouseOut用来创建“动态的”按钮。

下面是一个使用onMouseOver事件的例子。当onMouseOver事件被脚步侦测到时,就会弹出一个警告框:

a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false"

img src="w3schools.gif" width="100" height="30"

/a

来源:https://www.tulaoshi.com/n/20160219/1593238.html

延伸阅读
标签: Web开发
1、基本概念 JavaScript 是基于对象(object-based)的语言。这与Java不同,Java是面向对象的语言。而基于对象的基本特征,就是采用事件驱动(event-driven)。它是在用形界面的环境下,使得一切输入变化简单化。通常鼠标或热键的动作我们称之为事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动(Event Driver)。...
标签: Web开发
在很多语言的学习中,“事件”都是一个比较难理解,但是又是一个很重要的概念。JavaScript中的事件处理也是一样,正因为有了事件处理,才会出现Ajax拖动的效果。本文就讨论一下JavaScript中的事件处理,读过之后,您就会知道,很多Ajax框架实现拖动效果的原理了。 一、 IE Event对象 (一)IE Event对象的主要属性和方法 在IE中有一个专门负...
标签: Web开发
使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大,但JavaScript还是提供了创建一个新对象的方法。 使其不必像超文本标识语言那样,求于或其它多媒体工具,就能完成许多复杂的工作。 在JavaScript中创建一个新的对象是十分简单的。首先它必须定义一个对象,而后再为该对象创建一个实例。这个实例就是...
标签: Web开发
本节稍稍深入地讨论关于事件处理的话题,如果你对模式、闭包和面向对象等概念还不太理解,不妨暂且等阅读完相关内容之后再回过头来阅读它,相信你会有很大收获。 1 事件处理模式        在程序设计领域,“事件处理”是一种模式,当一个对象受外部影响而改变状态时,通过消息的方式将这个状态改变...
标签: Web开发
事件处理 概述 事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。事件的处理程序...

经验教程

155

收藏

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