将 OnClick Function 添加到新创建的映像中

Question

I'm needing to dynamicly add a onclick that can focus on itself so when clicked it will add the width and remove it

function addimage2(where) { 
  var img = document.createElement("img");
  img.src = "swatch.jpg";  
  img.width = 300;
  where.parentNode.appendChild(img);
}

old method

<img src="swatch.jpg" alt="swatch-sm" onClick="addimage2(this);">

I need it like this as new images are created dynamicly

img.onclick = function(this){
   if(this.width == 300) {
      this.removeAttribute("width");
   }else{
      this.setAttribute("width","300");
   }
}

Answer 1

Simply say

img.addEventListener("click",addimage2);

If you need to pass parameters to addimage2 then use the following:

img.addEventListener("click",event => {
    addimage2(parameters,here);
});

Answer 2

If you're going to be adding a bunch of these things, may I suggest a single delegated event listener, then you can add more images later and they will "just work". All you need to do is assign a class to all of the images you want to treat this way.

 document.addEventListener("click", (e) => { const el = e.target; if (el.classList.contains("resizey")) { if (el.width == 300) { el.removeAttribute("width"); } else { el.setAttribute("width","300"); } } }, true); // true to use capture

 <img class='resizey' src='https://upload.wikimedia.org/wikipedia/commons/3/3f/A_small_loch_in_the_saddle_between_Beinn_an_Dothaidh_and_Beinn_Dorain%2C_Scotland_01.jpg' /> <img class='resizey' src='https://upload.wikimedia.org/wikipedia/commons/9/94/Techumbre_mud%C3%A9jar%2C_Catedral%2C_Teruel%2C_Espa%C3%B1a%2C_2014-01-10%2C_DD_38.JPG' />