往往我们需要在
JS
中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用。
方法一、setAttribute
var
obj
=
document.getElementById("obj")
obj.setAttribute("onclick",
"javascript:alert('测试')")
这里利用
setAttribute
指定
onclick
属性,简单,很好理解,
但是:IE
不支持,IE
并不是不支持
setAttribute
这个函数,而是不支持用
setAttribute
设置某些属性,包括对象属性、集合属性、事件属性,也就是说用
setAttribute
设置
style、onclick、onmouseover
这些属性在
IE
中是行不通的。
方法二、用
attachEvent
和
addEventListener
IE
支持
attachEvent
obj.attachEvent("onclick",
Foo)
function
Foo()
{
alert("测试")
}
也可写在一起
obj.attachEvent("onclick",
function(){alert("测试")})
其它浏览器支持
addEventListener
obj.addEventListener("click",
Foo,
false)
function
Foo()
{
alert("测试")
}
同样也可写在一起
obj.addEventListener("click",
function(){alert("测试")},
false)
注意
attachEvent
的事件带
on,如
onclick,而
addEventListener
不带
on,如
click。
顺便说一下
addEventListener
的第三个参数(虽然很少用)
useCapture
-
如果为
true,则
useCapture
指示用户希望启动捕获。启动捕获后,所有指定类型的事件将在被指派到树中其下面的任何
EventTargets
之前指派给已注册的
EventListener。正在通过树向上
bubbling
的事件将不触发指定的使用捕获的
EventListener。
综合应用
复制代码
代码如下:
if
(window.attachEvent)
{
//IE
的事件代码
}
else
{
//其它浏览器的事件代码
}
方法三、事件
=
函数
例:obj.onclick
=
Foo
这在多个浏览器中均支持,这是属于旧的规范(方法二属于
DOM2
的规范),不过由于使用方便,用的场合也比较多。
下面是我的解决办法:
复制代码
代码如下:
function
show(){
alert("Hello,
world!!!")
}
obj.setAttribute('onclick',document.all
?
eval(function(){show()})
:
'javascript:show()')
WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件:<div>
<input
type="text"
id="txtPrice"
name
=
"txtPrice"
value
=
"0"/>
<div>
现在我们为其动态添加一事件,JS核心代码如下:
document.getElementById("txtPrice").attachEvent('onblur',
function
(){alert('添加事件成功!')})
【补充】
有时候为了实现不同浏览器之前的兼容,我们会这样写:
Code
highlighting
produced
by
Actipro
CodeHighlighter
(freeware)http://www.CodeHighlighter.com/-->1
if(window.attachEvent)
{
document.getElementById("txtPrice").attachEvent('onblur',
function
(){alert('添加事件成功!')})
}
else
{
document.getElementById("txtPrice").addEventListener('onblur',
function
(){alert('添加事件成功!')},false)
}
以上这篇JS动态给对象添加事件的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
如图,比方说我有一个函数,而我们需要点击按钮触发指定的函数,这就用到了绑定事件的方法。
如图,假定是点击事件,则在按钮里面添加onclick=函数名即可把函数绑定到按钮上。onclick绑定的是单击事件哦,当然还有很多其他的事件。
如图,绑定事件之后,当我们点击按钮即可触发绑定的函数,非常神奇哦。
当然,也可以给按钮设定一个ID,然后我们获取到带有ID的按钮。
然后在JavaScript中绑定事件也是可以的,这种方法代码比较多,想用哪种看你自己哦。
需要特别注意一点的是,如果用了第二种方法,当要获取id时,如果script脚本写在head里面,则要加上window.onload哦。如果是写在body后面,则不需要写window.onload。