# PointerLockControl Event

**URL:** <https://discourse.threejs.org/t/pointerlockcontrol-event/23669>\
**Category:** Questions\
**Tags:** pointerlockcontrols\
**Created:** [February 20, 2021, 12:01am UTC](https://discourse.threejs.org/t/pointerlockcontrol-event/23669 "2021-02-20T00:01:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![elysium11](https://avatars.discourse-cdn.com/v4/letter/e/8e7dd6/32.png) [@elysium11](https://discourse.threejs.org/u/elysium11)\
**Post date:** [February 20, 2021, 12:01am UTC](https://discourse.threejs.org/t/pointerlockcontrol-event/23669/1 "2021-02-20T00:01:25Z")

</div>

Hello,

i’m trying to understand how PointerLockControl Events are working .

i ve seen in the code there is 3 event created  
var changeEvent = { type: ‘change’ };  
var lockEvent = { type: ‘lock’ };  
var unlockEvent = { type: ‘unlock’ };

question 1) :i ve seen those event are use cause there is scope.dispatchEvent(change/lock/unlockEvent) in code , but i haven’t seen addEventListerner for this Event and i dont know what is the callback for each event in the scope( scope= three.pointerLockControl object ) .i mean i dont understand what happen when those event are fired .

question 2 ) i does believe to create an Event we need to write var changeEvent=new Event(‘change’);  
so i dont understand the write var changeEvent = { type: ‘change’ };

question 3) to lock in canvas wee need to use an addEventlisterner(‘click’, function(){camcontrol.lock(); })  
but to escape we need to press esc key and i didn’t find where is the line  
with an addeventlistener which listen the esc keypress to unlock .

thanks for your help

---

<div class="post-metadata">

**Author:** ![elysium11](https://avatars.discourse-cdn.com/v4/letter/e/8e7dd6/32.png) [@elysium11](https://discourse.threejs.org/u/elysium11)\
**Post date:** [February 20, 2021, 9:25am UTC](https://discourse.threejs.org/t/pointerlockcontrol-event/23669/2 "2021-02-20T09:25:46Z")

</div>

ive commented in PointerLockControl all line about change/lock/unlockEvent and everything work well without those line under firefox/chrome ( linux ) and edge(window ) .

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 20, 2021, 4:04pm UTC](https://discourse.threejs.org/t/pointerlockcontrol-event/23669/3 "2021-02-20T16:04:27Z")

</div>

Almost all controls fire custom events. You can add event listeners for those events like so:

```javascript
controls.addEventListener( 'change', myChangeListener );

```

---

<div class="post-metadata">

**Author:** ![elysium11](https://avatars.discourse-cdn.com/v4/letter/e/8e7dd6/32.png) [@elysium11](https://discourse.threejs.org/u/elysium11)\
**Post date:** [February 20, 2021, 4:13pm UTC](https://discourse.threejs.org/t/pointerlockcontrol-event/23669/4 "2021-02-20T16:13:27Z")

</div>

ok i understand .

the dispatchEvent is in case somebody need to manage this event and he just have to add your line  
controls.addEventListener( ‘change’, myChangeListener );

thank you very much