JS动态添加事件(关联函数)


<!--html 文件 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dynamic add event listener</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<input type="button" id="btn" value="click me" />
<script src="js/dynamicAddEvnet.js"></script>
</body>
</html>

//--js文件.
(function (){
var obj = document.getElementById("btn");
obj.addEventListener("click", hideAll, false);

if(window.addEventListener)
    {
        //其它浏览器的事件代码: Mozilla, Netscape, Firefox
        //添加的事件的顺序即执行顺序 //注意用 addEventListener 添加带on的事件,不用加on
//参数说明:type:String事件类型,函数,true为false为冒泡阶段
        obj.addEventListener("click", hideAll, false);
        //侦听器在侦听时有三个阶段:顺序为:捕获阶段(根节点到子节点检查是否调用了监听函数)→目标阶段(目标本身)→冒泡阶段(目标本身到根节点)。
    }
    else
    {
        //IE 的事件代码 在原先事件上添加 add 方法
        obj.attachEvent('onclick',hideAll);
    }
})();

function hideAll(){
var arrName = document.getElementsByTagName("p");
//alert("hideAll().length=" + arrName.length);
for(var i=0; i < arrName.length; i++){
//alert(arrName[i].innerHTML);
arrName[i].style.display = "none";
}
}

注:js代码要在加载完id标签OK后,才能调用;否提示取出的id对象为null.
本站声明
本文转载自:http://vikingwei.iteye.com/blog/2254068     作者:vikingwei     发布日期:2015-11-03     本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。


 
© 2014-2016 ITdaan.com 粤ICP备14056181号