javascript动态绑定事件用法

最新推荐文章于 2024-12-19 23:23:27 发布

原创最新推荐文章于 2024-12-19 23:23:27 发布 · 625 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了JavaScript中动态绑定的不同方法，特别是在不同浏览器如IE、Firefox和Chrome中的实现方式。通过一个具体的button点击事件示例，介绍了多种绑定事件的方法及其适用场景。

　　最近用到了javascript动态绑定，谈一谈个人的理解。以button的click事件为例来说明，在不同类型浏览器中用法不一样。

先上代码，这是IE中用法，不同浏览器中差别是在如何绑定click事件上。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>click动态绑定</title>

</head>

<body>
<input id="txtCity" City="txtCity" type="text" />
<script type="text/javascript">
function setCity()
{
var txtCity=document.getElementById("txtCity");
txtCity.setAttribute("value","中国");
}
var btn=document.createElement("input");
btn.setAttribute("type","button");
btn.setAttribute("value","动态绑定测试");
btn.onclick=setCity;
document.body.appendChild(btn);
</script>
</body>
</html>

在IE下用法：

用法1：btn.onclick=setCity;　

用法2：btn.setAttribute("onclick",function(){
var txtCity=document.getElementById("txtCity");
txtCity.setAttribute("value","中国");
}) ;

用法3：btn.setAttribute("onclick",setCity);

用法4：btn.attachEvent("onclick",setCity);

firefox或chrome下用法：

用法1：btn.setAttribute("onclick","setCity()"); //注意setCity后面的括号不要忘记写。

用法2：btn.addEventListener("click",setCity,false);

注意：chrome下用法btn.setAttribute("onclick","setCity()"); 在用于Chrome扩展程序开发时会失效(至于Chrome扩展程序如何开发网上有一些介绍，这里不赘述。)

我把上面脚本做点修改使之能较方便作为Chrome扩展程序安装，新建一个脚本文件test.js，然后在里面写入以下脚本。

function setCity()

{
alert('jj');
}
var btn=document.createElement("input");
btn.setAttribute("type","button");
btn.setAttribute("value","动态绑定测试");
btn.setAttribute("onclick","setCity()");
document.body.appendChild(btn);

然后把test.js安装到Chrome扩展程序中会发现单击按钮没有反映，为何会这样，目前还不清楚，有知道的朋友可以做一个补充说明。