JavaScript事件驱动及事件处理

罗马森林9

罗马森林9

2016-02-20 00:36

今天图老师小编给大家介绍下JavaScript事件驱动及事件处理,平时喜欢JavaScript事件驱动及事件处理的朋友赶紧收藏起来吧!记得点赞哦~

1、基本概念
  JavaScript是基于对象(object-based)的语言。这与Java不同,Java是面向对象的语言。而基于对象的基本特征,就是采用事件驱动(event-driven)。它是在用形界面的环境下,使得一切输入变化简单化。通常鼠标或热键的动作我们称之为事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动(Event Driver)。而对事件进行处理程序或函数,我们称之为事件处理程序(Event Handler)。

2、事件处理程序
  在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样,可以将前面所介绍的所有函数作为事件处理程序。
格式如下:
Function 事件处理名(参数表){
事件处理语句集;

}

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

3、事件驱动
  JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件:
(1)单击事件onClick
  当用户单击鼠标按钮时,产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生:
button(按钮对象)
checkbox(复选框)或(检查列表框)
radio (单选钮)
reset buttons(重要按钮)
submit buttons(提交按钮)
例:可通过下列按钮激活change()文件:

以下是引用片段:
Form
Input type="button" Value= onClick="change()"
/Form

在onClick等号后,可以使用自己编写的函数作为事件处理程序,也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例:
Input type="button" value=" " onclick=alert("这是一个例子");

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

2)onChange改变事件
  当利用text或texturea元素输入字符值改变时发该事件,同时当在select表格项中一个选项状态改变后也会引发该事件。
例:

以下是引用片段:
Form
Input type="text" name="Test" value="Test" onCharge="check('this.test)"
/Form

(3)选中事件onSelect
  当Text或Textarea对象中的文字被加亮后,引发该事件。
(4)获得焦点事件onFocus
  当用户单击Text或textarea以及select对象时,产生该事件。此时该对象成为前台对象。
(5)失去焦点onBlur
  当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时,引发该文件,他与onFocas事件是一个对应的关系。
(6)载入文件onLoad
  当文档载入时,产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用。
(7)卸载文件onUnload
  当Web页面退出时引发onUnload事件,并可更新Cookie的状态。

展开更多 50%)
分享

猜你喜欢

JavaScript事件驱动及事件处理

Web开发
JavaScript事件驱动及事件处理

JavaScript中的事件处理

Web开发
JavaScript中的事件处理

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JavaScript框架hover事件处理

Web开发
JavaScript框架hover事件处理

javascript鼠标事件

Web开发
javascript鼠标事件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JavaScript实例教程(六)JavaScript中处理事件之单击事件onClic

Web开发
JavaScript实例教程(六)JavaScript中处理事件之单击事件onClic

javascript 事件冒泡

Web开发
javascript 事件冒泡

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

因为我是咸蛋超人

因为我是咸蛋超人

JavaScript教程:浏览器对象层次及其主要作用

JavaScript教程:浏览器对象层次及其主要作用
下拉加载更多内容 ↓