javascript中的事件

静态网站跟动态网站最大的区别就是动态网站能与用户产生交互,能处理数据。在互联网的早期,访问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^)/