网站建设技术员招聘,网站备案变更主体电话,互联网企业排名,天津制作网站目录 一.事件类型
1.窗口事件
2.表单元素事件
3.图像事件
4.键盘事件
5.鼠标事件
二.JavaScript事件处理的基本机制
三.绑定事件的方法
1.DOM元素绑定
2.JavaScript代码绑定事件
3.监听事件函数绑定
四.JavaScript事件的event对象
1.获取event对象
2.鼠标坐标获取…目录 一.事件类型
1.窗口事件
2.表单元素事件
3.图像事件
4.键盘事件
5.鼠标事件
二.JavaScript事件处理的基本机制
三.绑定事件的方法
1.DOM元素绑定
2.JavaScript代码绑定事件
3.监听事件函数绑定
四.JavaScript事件的event对象
1.获取event对象
2.鼠标坐标获取
3.获取事件源 一.事件类型 JavaScript事件一般应用于捕获用户的操作事件类型有如下几类 1.窗口事件 窗口事件仅在body和frameset元素中有效 onload 当页面被加载时执行脚本
onunload 当页面被关闭时执行脚本
2.表单元素事件 仅在表单中有效 onchange 当元素改变时执行脚本
onsubmit 当表单被提交时执行
onreset 当元素被选取时执行脚本
onblur 当元素失去焦点时执行脚本
onfocus 当元素获得焦点时执行
3.图像事件 该事件在img标签中使用 onabort 当图像加载中断时执行脚本
4.键盘事件 键盘事件在如下标签中无效base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style和title onkeydown 当键盘被按下时执行脚本 onkeypress 当键盘按下又松开时执行脚本
onkyeup 键盘松开时执行脚本
5.鼠标事件 鼠标事件在如下标签中无效base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style和title onclick 当鼠标被单击时执行脚本
ondblclick 当鼠标被双击时执行脚本
onmousedown 当鼠标按钮被按下时执行脚本
onmouseout 当鼠标指针移出元素时执行脚本
onmouseover 当鼠标悬停于元素上时执行脚本
onmouseup 当鼠标按钮被松开时执行脚本
onmousemover 当鼠标移动时执行脚本
二.JavaScript事件处理的基本机制
1对DOM元素绑定事件处理函数
2监听用户的操作
3当用户在相应的DOM元素上进行和绑定事件对应的操作时事件处理函数做出响应
4将处理结果更新到html文档
三.绑定事件的方法 事件一版要和DOM元素进行绑定绑定之后才可以监听用户的操作绑定的方式有如下三中 1.DOM元素绑定 所谓DOM元素绑定就是将HTML元素绑定事件一般格式如
onxxx“javascript code”
其中的javascript code是一些事件进行的函数这些函数可以是JavaScript内部的也可以是我们自己定义的
例如原生函数绑定事件通过绑定事件onclick实现一个alert功能 点击按钮出现警示框 如果上面的代码也可以通过自定义的函数实现功能 2.JavaScript代码绑定事件 所谓JavaScript事件绑定就是通过在JavaScript中绑定事件实现事件和HTML元素的分离事件绑定的语法一般为
elementobject.onxxxfunction(){
//事件函数
}
例如一个鼠标悬停改变图片的案例 鼠标没有移动到图片上时 鼠标悬停到图片上时 3.监听事件函数绑定 事件监听函数有两addEventListener()和attachEvent()函数 1addEventListener()函数语法
elementobject.addEvenListener(evenName,handle,useCapture);
看参数
evenName 事件的名称但这里的名称不加on例如clickdblclick事件
handle 事件句柄事件处理的函数
useCapture 布尔值是否使用捕获一般为false
例如上面美女图片的例子用监听事件函数写 2attachEvent()函数语法 注意前面的addEventListener()函数一般的浏览都可以用但有写IE8及其以下版本不能用所有可以用attachEvent()函数但这个函数太古老了有些浏览器还真不支持addEvent()
elementobject.addEvent(evenName,handle);
参数
evenName 事件的名称但这里的名称不加on例如clickdblclick事件
handle 事件句柄事件处理的函数
四.JavaScript事件的event对象 JavaScript事件的event对象表示当前事件event对象的属性包含了当前对象的状态只在事件发生的过程中才有效 1.获取event对象 event对象参数传入通过传入就可以得到某个DOM的当前事件
elementobject.onxxxfunction{
var evee //声明一个变量来接受event对象
} 对于IE8及其以下版本event必须作为window对象的一个属性
elementobject.onxxxfunction(){
var evewindow.event;
}
小例 2.鼠标坐标获取 鼠标坐标是event对象的一个属性鼠标坐标包括鼠标Y轴坐标Y轴坐标相对客户端坐标和相对屏幕坐标 W3C规范所规范的属性
clientX 鼠标指针相对于客户端的水平坐标
clientY 鼠标指针相对于客户端的垂直坐标
screenX 鼠标指针相对于计算机屏幕的水平坐标
screenY 鼠标指针相对于计算机屏幕的垂直坐标
IE浏览器特有的属性
offsetX 发生事件的地点在事件源元素的坐标体系中的水平坐标
offsetY 发生事件的地点在事件源元素的坐标体系中的垂直坐标
x 事件发生的位置的水平坐标
y 事件发生的位置的垂直坐标
例 3.获取事件源 顾名思义就是看是哪一个元素属性发生的事件这个属性是target在IE8以下以下不支持这个属性可以用SRCElement属性获取事件源 例
