js动态添加点击事件的两种方法

js动态添加点击事件或其他事件（这里以点击事件为例）
第一种：加载 js文件时自动添加，这种方法可以免去html元素内的onclick等属性一长串的字符，也方便一些像我这样初级的查看源代码时找不着北；
但缺点是只能在页面启动时加载一次（不知道这样表述准不准确，反正我能懂就好了），想要灵活的添加移除还不方便，案例代码如下：

var redmove=document.getElementById("rolemove");
redmove.addEventListener('click',function(){…这里是执行的代码…});

或者

var redmove=document.getElementById("rolemove");
redmove.addEventListener('click',test,true);
fucntion test(){ …这里是执行的代码…}

但是遇到需要动态添加的情况上面就不行了，比如在函数中用上面的：

function xyz(){
var red=document.getElementById("role");
red.addEventListener('click',test,true);
fucntion test(){ …这里是执行的代码…}
}

调用xyz函数后，发现并没有卵用

所以可以用另一种方法，用setAttribute给元素加属性onclick，如果要解除绑定事件可以用removeEventListener()；这样就可以随时动态添加和解除绑定事件了。如下

html页面部分

<div id="kk" ></div>

js代码部分

function role(){
	document.getElementById("kk").setAttribute("onclick","temptest()");
}

function temptest(){
	 …这里是执行的代码…
}

解除绑定的部分就不写了，比较简单，和addEventListener一样，就是把addEventListener换成removeEventListener就可以了；

补充：
应用中发现一个更好的动态添加事件的方法：

var temprm=document.getElementById("gg");
		
		temprm.onclick=function(){
			var tid=this.id;
			test(tid);
		};

用这种方法也可以动态添加上事件，而且可以加到循环中，批量添加，简直不要太爽。具体的执行方法可以放到test()函数中，如果你用的到，就知道这个办法多香了。解除也简单
解除绑定：

document.getElementById("id").onclick=null;

也可以批量操作