# "paste" event listener not working for a P5.Graphic?

**URL:** <https://discourse.processing.org/t/paste-event-listener-not-working-for-a-p5-graphic/20095>\
**Category:** Coding Questions\
**Created:** [April 24, 2020, 12:41pm UTC](https://discourse.processing.org/t/paste-event-listener-not-working-for-a-p5-graphic/20095 "2020-04-24T12:41:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yom](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yom](https://discourse.processing.org/u/Yom)\
**Post date:** [April 24, 2020, 12:41pm UTC](https://discourse.processing.org/t/paste-event-listener-not-working-for-a-p5-graphic/20095/1 "2020-04-24T12:41:24Z")

</div>

Hello 🙂

I would like to add a “paste” event listener to a p5.Graphic, how can I do that ?

I’ve tried like this:

```auto
g = createGraphics(100, 100);
g.elt.addEventListener("paste", pasteEvent => console.log("paste"));

```

But the event is not firing when I try to paste something inside g. I have other event listeners for g, such as drop, mouseover etc, all working, it’s just this paste event that doesn’t work, I don’t understand why. If I remove “g.elt.” or replace with “g.elt.parentElement” then the event works but on the entire window, I would like to be able to paste only inside g.

I also tried to add

```auto
g.attribute("contenteditable","true");

```

or

```auto
g.attribute("type", "input");

```

Without luck.

My actual workaround is to set a variable “mouseInside” to true in g’s mouseover event , set it to false in g’s mouseout event, and then in the window’s paste event I check if this variable is true, it works…

Is there a better solution ?

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [May 25, 2020, 3:11am UTC](https://discourse.processing.org/t/paste-event-listener-not-working-for-a-p5-graphic/20095/2 "2020-05-25T03:11:41Z")

</div>

How did you get any eventListener to work on your `createGraphics()`?

I tried … but no luck.

```auto
function setup() {
  const cnv = createCanvas(400, 400);
  // cnv.elt.addEventListener('click', e=> { console.log(e) });
  
  const g = createGraphics(width,height);
  g.elt.addEventListener('click', e=> { console.log(e) });
  
  g.rectMode(CENTER);
  g.rect(width*0.5,height*0.5,100,100);
  image(g,0,0);
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 25, 2020, 3:29am UTC](https://discourse.processing.org/t/paste-event-listener-not-working-for-a-p5-graphic/20095/3 "2020-05-25T03:29:47Z")

</div>

> [@slow\_izzm](#):
>
> I tried … but no luck.

You need to call **show()** 1st: [reference | p5.js](http://p5js.org/reference/#/p5.Element/show)

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [May 25, 2020, 5:10am UTC](https://discourse.processing.org/t/paste-event-listener-not-working-for-a-p5-graphic/20095/4 "2020-05-25T05:10:42Z")

</div>

Thanks @GoToLoop

@Yom … this is returning what I pasted.

```auto
function setup() {
  createCanvas(400, 400);

  const g = createGraphics(100, 100);
  g.show();
  g.attribute('contenteditable', 'true');
  g.elt.addEventListener('paste', e => {
    console.log(e.clipboardData.getData('text'))
  });
  g.position(100, 100);
  g.rect(0, 0, 100, 100);
}

```