在各浏览器中动态添加事件-方法篇
2009-10-19 10:46
405 查看
在 HTML 中可以直接写事件代码,比如:<input type="button" value="验证" onclick="javascript:Verify();" />,这在各浏览器中的解释均相同,无可争议。
但往往我们又需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用。
方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('测试');");
这里利用 setAttribute 指定 onclick 属性,简单,很好理解,但是:IE 不支持,IE 并不是不支持 setAttribute 这个函数,而是不支持用 setAttribute 设置某些属性,包括对象属性、集合属性、事件属性,也就是说用 setAttribute 设置 style、class、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。
综合起来:
if (window.attachEvent)
{
//attachEvent 代码
}
else
{
//addEventListener 代码
}
顺便说一下 addEventListener 的第三个参数(虽然很少用) useCapture - 如果为 true,则 useCapture 指示用户希望启动捕获。启动捕获后,所有指定类型的事件将在被指派到树中其下面的任何 EventTargets 之前指派给已注册的 EventListener。正在通过树向上 bubbling 的事件将不触发指定的使用捕获的 EventListener。更详细的解释,请参见 addEventListener 的第三个参数 useCapture 。
方法三、事件 = 函数名或函数
obj.onclick = FuncName;
function FuncName()
{
alert("go");
}
//也可以写在一起,如下:
obj.onclick = function (event) { alert("go"); };
这在多个浏览器中均支持,这是属于旧的规范(方法二属于 DOM2 的规范),不过由于使用方便,用的场合也比较多。
但往往我们又需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用。
方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('测试');");
这里利用 setAttribute 指定 onclick 属性,简单,很好理解,但是:IE 不支持,IE 并不是不支持 setAttribute 这个函数,而是不支持用 setAttribute 设置某些属性,包括对象属性、集合属性、事件属性,也就是说用 setAttribute 设置 style、class、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。
综合起来:
if (window.attachEvent)
{
//attachEvent 代码
}
else
{
//addEventListener 代码
}
顺便说一下 addEventListener 的第三个参数(虽然很少用) useCapture - 如果为 true,则 useCapture 指示用户希望启动捕获。启动捕获后,所有指定类型的事件将在被指派到树中其下面的任何 EventTargets 之前指派给已注册的 EventListener。正在通过树向上 bubbling 的事件将不触发指定的使用捕获的 EventListener。更详细的解释,请参见 addEventListener 的第三个参数 useCapture 。
方法三、事件 = 函数名或函数
obj.onclick = FuncName;
function FuncName()
{
alert("go");
}
//也可以写在一起,如下:
obj.onclick = function (event) { alert("go"); };
这在多个浏览器中均支持,这是属于旧的规范(方法二属于 DOM2 的规范),不过由于使用方便,用的场合也比较多。
相关文章推荐
- jQuery为动态生成的select元素添加事件的方法
- javascript动态添加事件方法详解--http://www.itjishu.com/200902/128.html
- jquery无法为动态生成的元素添加点击事件的解决方法
- js动态添加onload、onresize、onscroll事件(另类方法)
- jQuery动态添加的元素绑定事件处理函数代码的方法及比较
- Jquery动态添加节点,绑定事件失效的解决方法
- 在各浏览器中动态添加事件-参数篇
- 动态添加事件及区分IE和其他浏览器的JS脚本
- JS脚本实现动态给标签控件添加事件的方法
- 多种方法实现JS动态添加事件
- jquery动态添加元素事件失效问题解决方法
- jquery动态添加元素事件失效问题解决方法
- iOS中动态注入JavaScript方法。动态给html标签添加事件
- 详解jQuery向动态生成的内容添加事件响应jQuery live()方法
- jQuery为动态生成的select元素添加事件的方法
- bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
- jQuery给动态添加的元素绑定事件的方法
- js动态添加事件的方法
- JS实现动态添加DOM节点和事件的方法示例
- jQuery 动态添加的按钮 事件失效解决方法