如果元素是appendChild 动态添加到元素中的,并且append的子元素数量为多个,那么绑定点击事件后如何让程序区别你是点击了那个元素触发的事件可能会成为一个问题。
例如我的这个实例中,我appendChild操作之后,添加进去10个img元素,然后在每个appendChild操作之前,会为img添加点击事件如下:
img.addEventListener("click",function(e){
showIntroduce();//这是我点击时需要运行的函数
});
在showIntroduce函数中,我需要知道是那个 img被点击了,这样才能做出相应正确的操作。
那么如何去做区分呢?
其实只要在执行showIntroduce的时候,告诉他是谁被点击了就可以了。
我这里用了一个比较简单的方法,为动态添加的每一个img添加一个value属性,这个value的值是唯一的,在执行showIntroduce的同时,将整个value传入,那么后端或者是其他函数在执行的时候,就能够知道是谁被触发了。
实例代码如下:
var img = document.createElement("img");
var imglist = document.getElementById("imglist");//获取对象,很关键
//设置img相关属性(图片路径,绝对定位,起始位置xy,图片宽高)
img.src = url;
img.style.position = "absolute";
img.style.width = img_width +"px";
img.style.height = img_height+"px";
img.style.left = x +"px";
img.style.top = y+"px";
img.name = "iconImage";
img.value = timer;
//为图片增加事件
img.addEventListener("click",function(e){
showIntroduce(this.value,what,x,y);
});
imglist.appendChild(img);
timer++;
其中的timer是事前定义好了的,初始值为0.每次append元素之后,该值就会简单加一达到区别元素的目的。
在执行相关函数的同时,讲这个value也一同传入,就能进行区分。