appndChild 为子元素添加点击事件

如果元素是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也一同传入,就能进行区分。

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值