事件:JavaScript中的事件是由访问web页面用户的一系列操作引起的,比如点击鼠标,键盘按键等。当用户执行某些操作的时候再去执行一些代码。
事件模型:内联模型、脚本模型、DOM2模型
内联模型:事件处理函数是html元素的一个属性,即把事件处理函数代码写在html文件中
//在HTML中把事件处理函数作为属性来执行JS代码
<div id="d1" onclick="alert('事件函数')">测试DIV</div> //注意其中的单双引号
<div id="d1" onclick="box()">测试DIV</div>
//PS: 不能够将box函数放在window.onload中,否则就看不到这个函数
脚本模型:内联模型违反了HTML和JS代码分离的原则,所有可以再JS中处理事件,就是脚本模型 脚本模型中首先是通过DOM来获得元素,然后给元素绑定事件处理函数: 元素名.事件处理函数名 = 绑定的函数名
绑定函数的时候,有两种方法,一种是绑定匿名函数,box.onclick = function(){};
一种是绑定外部通用函数,box.oncclick = click;这种模式中注意,后面是赋值click函数的函数名,是没有添加括号的,如果添加了括号就是执行函数而不是绑定函数(注册函数)
事件处理函数分为三类:鼠标点击事件,键盘按键事件,HTML事件;每一个事件都有自己的触发范围,如果超出了这个范围,就不会起作用
事件处理函数 |
影响的范围 |
描述 |
onabort |
图像 |
当图像加载被中断时 |
onblur |
图像,窗口,所有的表单元素 |
当焦点从对象上面离开时 |
onchange |
输入框、选择框、文本区域 |
当改变元素的值,并且在元素失去焦点后触发 |
onclick |
连接、按钮、表单、图片映射区域 |
用户单击对象时 |
ondblclick |
链接、按钮、表单对象 |
用户双击对象时 |
ondragDrop |
窗口 |
当用户将一个对象拖拽到浏览器窗口上的时候 |
onError |
脚本 |
当脚本中发生语法错误的时候 |
onfocus |
图像,窗口,所有的表单元素 |
单击鼠标或者将鼠标移动聚焦到窗口或框架上时 |
onkeydown |
文档、图像、链接、表单 |
当按键被按下时 |
onkeyup |
文档、图像、链接、表单 |
当按键被松开时, |
onkeypress |
文档、图像、链接、表单 |
当按键被按下然后松开时 |
onload |
主题、框架集、图像 |
文档或者图像加载后 |
onunload |
主体、框架集 |
文档或者框架集卸载后 |
onmouseover |
连接、按钮、表单、图片映射区域 |
当鼠标移到元素上面时 |
onmouseout |
连接、按钮、表单、图片映射区域 |
当鼠标移出元素时 |
onmousemove |
连接、按钮、表单、图片映射区域 |
当鼠标在元素上面移动时 |
onreset |
表单复位按钮 |
按下时表单元素的值清空复位 |
onselect |
表单 |
当用户选择文本框(text/textarea)中一个或者多个字符的时候触发 |
onsubmit |
表单 |
当用户点击提交的时候再表单上面触发 |
onscroll |
|
当用户滚动带滚动条的元素触发 |
|
|