静态网站跟动态网站最大的区别就是动态网站能与用户产生交互,能处理数据。在互联网的早期,访问internet的方式与我们现在又很大的不同,那个时候的宽带是很小的,如果要处理验证,往返服务器要很长事件的等待,javascript当时设计就是为了解决这个问题,我们可以在前端直接做验证,就节省了往返服务器的时间。我们用户与html的交互可以通过javascript,纽带就是事件,比如,点击按钮就是一个事件,我们可以在时间处理程序,通俗的讲就是事件回调函数,即我们处理事件的函数里面写我们的脚本,达到交互的效果。
事件流
那什么是事件流,事件流其实就是事件执行的方向,比如代码
如果我们点击button,则会弹出两次hello world,因为,button实际上是在div内,我们点击button的时候同时也在点击div。所以同时会触发button的onclick事件,也会触发div的onclick事件。那它们谁先触发谁后触发呢,触发的顺序其实就是事件流。ie的事件流为冒泡事件流。从最里层的元素开始触发,一直到document元素。mozilla同ie一样,但是它会一直触发到window对象,netscape的事件流与ie刚好相反,它是从最外层开始触发,一直到最里层元素。dom的事件流是同时支持这两种。
事件监听函数
其实我更喜欢叫事件处理函数,就是处理这个事件所要执行的功能(函数)。每个事件都有自己的名字,比如onclick,onclick就是事件,然后需要一个函数来处理这个事件。分配时间处理函数有两种方法,第一种是先得到元素也就是对象的引用。然后分配函数
function getevent() {
var obutton = document.getelementbyid("edrick");
obutton.onclick = sayhello;
}
需要注意的是,如果采用这样的方式处理事件,那么事件名必须小写,另外的一种方式是直接在元素上声明特性,用函数名用作特性的值,不区分大小写
这里我们做的都是分配一个事件处理函数,但是如果我们想为一个事件分配多个事件处理函数呢?ie跟dom的做法是不一样的,我们先看看ie的做法。
在ie中每个元素和window对象都有两个方法,一个是attachevent()和detachevent().顾名思义, attachevent()用来给一个事件附加事件处理函数, detachevent().用来将事件处理函数分离出来。
function getevent() {
var obutton = document.getelementbyid("edrick");
obutton.attachevent("onclick", fevent1);
obutton.attachevent("onclick", fevent2);
}
function fevent1() {
alert("checked");
}
function fevent2() {
alert("also checked");
}
测试代码会弹出两个系统框
然后我们可以把函数分离出来
function getevent() {
var obutton = document.getelementbyid("edrick");
obutton.attachevent("onclick", fevent1);
obutton.attachevent("onclick", fevent2);
obutton.detachevent("onclick", fevent2);
}
这样就会只弹出一个系统框了
dom提供的方法是addeventlistener()和 removeeventlistener(),他们的用法跟ie上的差不多,唯一的不同就是它们需要提供3个参数,第三个参数指明事件流,true为从外到里的事件流,false则为从里到外的事件流。还要注意点的是,如果在addeventlistener()中指明的事件流是冒泡,那么在removeeventlistener()的时候,第三个参数也应该为冒泡,必须一致才能正确的删除事件。如果不这样做,虽然不会出错,但是函数也不会正确的删除
事件对象
有时候我们需要知道或者获取事件触发时候的一些信息,比如
引起事件的对象
事件发生时的一些我们需要的信息(鼠标坐标,键盘键位等)事件对象只有在事件发生时才被创建,而且只有事件处理函数可以访问。所有的事件函数执行完毕后,事件对象就销毁
ie和dom不同,我们先看ie获取事件对象的方法
在ie中事件对象是window的一个属性event,尽管它是window对象的属性,但是它也只能在事件发生时访问。
function sayhello() {
var oevent = window.event;
alert("hello world");
}
在dom中,事件对象必须作为参数传递给处理函数
function sayhello() {
var oevent = arguments[0];
alert("hello world");
}
当然,这里也可以直接传进来
function sayhello(event) {
var oevent = event
alert("hello world");
}
属性/方法
事件对象的属性和方法可以让我们得到特定的信息,注意,特定属性只对特定的事件,ie跟dom的属性有差别
ie
dom属性/方法
相似性
在ie跟dom的事件对象属性中,有一些相似的属性
type//获取事件的类型,比如是onclick或者onmouseover
keycode//获取按键的代码 (keydown/keyup)。回车键的keycode为13,空格键的keycode为32,回退的keycode为8
shiftkey
altkey
ctrlkey//检测shift,alt,ctrl是否按下
clientx
clienty//检测鼠标在客户端区域的位置
screenx
screeny//检测鼠标相对屏幕的位置
区别
检测事件源,触发时间的对象
ie:srcelement
dom:target
获取字符代码
ie:ie使用属性keycode获取字符代码(非shift,alt,ctrl),ie的 keycode会直接返回字符的代码(unicode值)
dom:dom使用charcode来获取,然后使用string.fromcharcode()来返回实际的字符,也可以在获取字符的时候使用ischar来判断按键是否包含字符
阻止事件的默认行为
ie:returnvalue
dom:preventdefault()
为什么要阻止事件的默认行为呢,典型的例子,我们阻止右键点击就需要
function leftorright() {
document.oncontextmenu = function () {
alert("禁止右键点击");
var oevent = window.event;
oevent.returnvalue = false;
setinterval("alert('将在2秒后关闭');window.close();",2000);
}
}
当然这里是ie的写法,dom是不一样的。
停止事件流
ie:cancelbubble=true
dom:stoppropagation()
事件类型
鼠标事件
onclick//用户单击鼠标左键时发生
dblclick//用户双击鼠标左键时发生
mousedown//用户单击任意一个鼠标按钮时发生
mouseout//鼠标指针在某个元素上,且用户正要将其移出元素的边界
mouseover//鼠标移出某个元素,到另一个元素上时发生
mouseup//用户松开任意一个按钮时发生
mousemove//鼠标在某个元素上时持续发生
对于mouseover和mouseout事件多出两个额外的属性,一个是fromelement和toelement,fromelement包含鼠标来自的元素,toelement包含鼠标去往的元素。
而在dom中,只有一个属性,relatedtarget,在mouseover事件中,relatedtarget表示鼠标来自何处,在mouseout表示鼠标去往何处
键盘事件
keydown//用户在键盘上按下某按键,一直按着某按键,它会不断触发
keypress//用户按下一个键,并产生一个字符时发生
keyup//用户释放按着的按键
html事件
load//页面完全载入后,在window对象上触发,所有的框架都载入后,在框架集上触发,或某个完全载入后,在其上触发
unload//页面完全卸载后,在window对象上触发,所有的框架都卸载后,在框架集上触发,或某个完全卸载后,在其上触发
abort//用户停止下载过程时,如果对象还未完全载入,就在其上触发
error// javascript脚本出错时,在window对象上触发。某个或某个无法载入时触发
select//用户选择了文本框的一个或多个文件时触发
change//文本框市区焦点时,并且在它获得焦点后内容发生过改变时触发;某个元素的值发生改变时触发
resize// 窗口或框架的大小发生改变时触发
scroll//用户在任何带滚动条的元素上触发时,我们可以使用body的属性scrollleft和scrolltop来保存水平和垂直的滚动距离。
focus//任何元素或窗口本身获取焦点时
blur//任何元素失去焦点时
其实我们可以写一个事件的帮助类来实现获取事件,事件的属性/方法来达到统一dom和ie的效果。有兴趣可以自己实现,以后有时间我会开一篇专门实现
======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/