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;

也可以批量操作

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐