一直没写过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>