js 实现一些跨浏览器的事件方法详解及实例

JavaScript04

js 实现一些跨浏览器的事件方法详解及实例,第1张

js实现一些跨浏览器的事件方法

用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象:

var

EventUtil

=

{

on:

function(element,

type,

handler)

{/*

添加事件

*/

if

(element.addEventListener)

{

element.addEventListener(type,

handler,

false)

}

else

if

(element.attachEvent)

{//IE

注意:此时事件处理程序会在全局作用域中运行,因此用attachEvent绑定的事件,此时在事件处理函数里的this

等于window,使用时要注意

element.attachEvent("on"

+

type,

handler)

}

else

{

element["on"

+

type]

=

handler

}

},

off:

function(element,

type,

handler)

{/*

移除事件

*/

if

(element.removeEventListener)

{

element.removeEventListener(type,

handler,

false)

}

else

if

(element.detachEvent)

{

element.detachEvent("on"

+

type,

handler)

}

else

{

element["on"

+

type]

=

null

}

},

getEvent:

function(event)

{/*

返回对event对象的引用

*/

return

event

?

event

:

window.event

},

getTarget:

function(event)

{/*

返回事件的目标

*/

return

event.target

||

event.srcElement

},

preventDefault:

function(event)

{

/*

取消事件的默认行为

*/

if

(event.preventDefault)

{

event.preventDefault()

}

else

{

event.returnValue

=

false

}

},

stopPropagation:

function(event)

{/*

阻止事件冒泡

*/

if

(event.stopPropagation)

{

event.stopPropagation()

}

else

{

event.cancelBubble

=

true

}

},

/*

mouseover

和mouserout

这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。*/

getRelatedTarget:

function(event)

{

if

(event.relatedTarget)

{

return

event.relatedTarget

}

else

if

(event.toElement)

{//IE8

mouserout事件

return

event.toElement

}

else

if

(event.fromElement)

{//IE8

mouseover事件

return

event.fromElement

}

else

{

return

null//其他事件

}

}

}

调用如下:

EventUtil.on(document,

"click",

function(event){//为document元素绑定click事件

event

=

EventUtil.getEvent(event)//获取event事件对象

alert("Screen

coordinates:

"

+

event.screenX

+

","

+

event.screenY)

})

文章参考自《JavaScript高级程序设计第三版》

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

1、onClick单击事件,常用于button\radio\checkbox\reset buttons\submit buttons对象上面。

2、onChange改变事件,常用于textbox \textarea对象上面,当输入的字符值改变时执行对应的事件代码。

3、onSelect选中事件,当text或textarea对像中的文字被加亮后,引发该事件。

4、onFocus获得焦点事件,当用户单击Text对像以及select对象时,产生该事件。

5、失去焦点onBlur,当不在拥有焦点而退到后台时,引发该事件。

6、载入文件onLoad事件,当文档载入时,产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用。

7、制裁文件onUnload事件,当WEB页退出时引发onUnload事件,并可更新Cookie的状态。