第一章 web前端开发工程师--JavaScript 初级程序设计 1-17 JavaScript 事件操作

JavaScript 事件操作

 

本节课所讲内容：

1. JavaScript 事件介绍
2. JavaScript事件操作
3. JavaScript 事件函数

主讲教师：Head老师

一. 事件介绍

JavaScript事件是由访问Web页面的用户，引起的一系列操作，例如：用户点击。当用户执行某些操作的时候，再去执行一系列代码。

二. 事件操作

//在HTML中把事件处理函数作为属性执行JS代码

<input type="button" value="按钮" οnclick="alert('Lee');"  />          //注意单双引号

 

//在HTML中把事件处理函数作为属性执行JS函数

<input type="button" value="按钮" οnclick="box();"  />                  //执行JS的函数

由于内联模型违反了HTML与JavaScript代码层次分离的原则。为了解决这个问题，我们可以在JavaScript中处理事件。这种处理方式就是脚本模型。

       var input = document.getElementsByTagName('input')[0];         //得到input对象

       input.onclick = function () {                                                       //匿名函数执行

              alert('Lee');

       };

三. 事件函数

JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。

事件处理函数	影响的元素	如何发生	FF	IE
onabort	图像	当图像加载被中断时	3	4
onblur	窗口、框架、所有表单对象	当焦点从对象上移开时	2	3
onchange	输入框，选择框和文本区域	当改变一个元素的值且失去焦点时	2	3
onclick	链接、按钮、表单对象、图像映射区域	当用户单击对象时	2	3
ondblclick	链接、按钮、表单对象	当用户双击对象时	4	4
ondragdrop	窗口	当用户将一个对象拖放到浏览器窗口时	3	4
onError	脚本	当脚本中发生语法错误时	2	3
onfocus	窗口、框架、所有表单对象	当单击鼠标或者将鼠标移动聚焦到窗口或框架时	4	3
onkeydown	文档、图像、链接、表单	当按键被按下时	4	3
onkeypress	文档、图像、链接、表单	当按键被按下然后松开时	4	3
onkeyup	文档、图像、链接、表单	当按键被松开时	2	3
onload	主题、框架集、图像	文档或图像加载后	4	4
onunload	主体、框架集	文档或框架集卸载后	6	3
onmouseout	链接	当图标移除链接时	4	4
onmouseover	链接	当鼠标移到链接时	2	3
onmove	窗口	当浏览器窗口移动时	4	4
onreset	表单复位按钮	单击表单的reset按钮	3	4
onresize	窗口	当选择一个表单对象时	4	4
onselect	表单元素	当选择一个表单对象时	2	3
onsubmit	表单	当发送表格到服务器时	2	3
事件处理函数	影响的元素	何时发生	2	3

1. 鼠标事件，页面所有元素都可触发

click：当用户单击鼠标按钮或按下回车键时触发。

       input.onclick = function () {

              alert('Lee');

       };

 

dblclick：当用户双击主鼠标按钮时触发。

       input.ondblclick = function () {

              alert('Lee');

       };

 

mousedown：当用户按下了鼠标还未弹起时触发。

       input.onmousedown = function () {

              alert('Lee');

       };

 

mouseup：当用户释放鼠标按钮时触发。

       input.onmouseup = function () {

              alert('Lee');

       };

 

mouseover：当鼠标移到某个元素上方时触发。

       input.onmouseover = function () {

              alert('Lee');

       };

 

mouseout：当鼠标移出某个元素上方时触发。

       input.onmouseout = function () {

              alert('Lee');

       };

 

mousemove：当鼠标指针在元素上移动时触发。

       input.onmousemove = function () {

              alert('Lee');

       };

键盘事件

keydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发。

       onkeydown = function () {

              alert('Lee');

       };

 

keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发。

       onkeypress = function () {

              alert('Lee');

       };

 

keyup：当用户释放键盘上的键触发。

       onkeyup = function () {

              alert('Lee');

       };

 

HTML事件

load：当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发。

window.onload = function () {

       alert('Lee');

};

 

unload：当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发。

window.onunload = function () {

       alert('Lee');

};

 

select：当用户选择文本框(input或textarea)中的一个或多个字符触发。

       input.onselect = function () {

              alert('Lee');

       };

 

change：当文本框(input或textarea)内容改变且失去焦点后触发。

       input.onchange = function () {

              alert('Lee');

       };

 

focus：当页面或者元素获得焦点时在window及相关元素上面触发。

       input.onfocus = function () {

              alert('Lee');

       };

 

blur：当页面或元素失去焦点时在window及相关元素上触发。

       input.onblur = function () {

              alert('Lee');

       };

submit：当用户点击提交按钮在<form>元素上触发。

       form.onsubmit = function () {

              alert('Lee');

       };

 

reset：当用户点击重置按钮在<form>元素上触发。

form.οnreset= function () {

              alert('Lee');

       };