js之append元素事件绑定

一直没写过js前端原生js和jquery的东西,是因为原生的js它是弱类型语言,也就意味着他的扩展性很强,开发人员可以有比较大的发挥空间,但是对于规范性的要求就比较下,比如函数接受的参数类型我们不需要去指定,代码结尾的分号没有也不会影响编译运行,不像强类型语言java等对格式有严格要求。

        这篇文章我们主要来了解一下前端对于一个dom元素在append元素的时候如何给append的元素添加事件,众所周知,给dom元素添加事件,需要在dom元素渲染完成之后,我们利用bind函数进行事件绑定,以为这样的方式更贴合我们的实际开发需求,也会使我们的代码更加简洁,接下来我们看两个小例子,

        这两个方法都可以实现往div元素中渲染进去一个a标签,并且给a标签绑定一个click事件,但是实现方式有所区别,一个正常绑定,一个利用了闭包,例如help-box1第一次点击的时候是从11开始的,而help-box2是从1开始的,这就说明了第一个绑定函数预执行了一次,而闭包绑定的函数并没有预执行,所以说我们可以根据实际的使用场景来判别我们需要用那种方式对元素进行渲染

<!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=utf-8" />
<title>演示</title>
<script type="text/javascript" src="./jquery-1.8.0.min.js"></script>
</head>
<body>
<div id="help-box1" style="background:red ;width: 100px;    height: 200px;">		
</div>
<div id="help-box2" style="background:blue ;width: 100px;    height: 200px;">		
</div>
<script type="text/javascript">
var number = 10;
for(var i = 0;i < number;i++){
	 $("#help-box1").append($("<a>你好</a>").bind("click",function(){
	          ++i;
	         alert(i);
     }));
   
     $("#help-box2").append($("<a>你好</a>").bind("click",function(i){
		  return function(){
				++i;
			   alert(i);
		  }  
     }(i)));
}
</script>
</body>
</html>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值