# events

***

**1. Button Click Event**

```javascript
const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  // Do something when the button is clicked
});
```

**2. Window Load Event**

```javascript
window.addEventListener('load', () => {
  // Do something when the window is loaded
});
```

**3. Form Submit Event**

```javascript
const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent the form from submitting
  // Do something with the form data
});
```

**4. Mouse Move Event**

```javascript
const body = document.body;

body.addEventListener('mousemove', (event) => {
  // Get the mouse position
  const x = event.clientX;
  const y = event.clientY;
  // Do something with the mouse position
});
```

**5. Key Press Event**

```javascript
window.addEventListener('keypress', (event) => {
  // Get the key that was pressed
  const key = event.key;
  // Do something with the key that was pressed
});
```

**6. Page Scroll Event**

```javascript
window.addEventListener('scroll', () => {
  // Get the scroll position
  const scrollX = window.scrollX;
  const scrollY = window.scrollY;
  // Do something with the scroll position
});
```

**7. Resize Event**

```javascript
window.addEventListener('resize', () => {
  // Get the window size
  const width = window.innerWidth;
  const height = window.innerHeight;
  // Do something with the window size
});
```

**8. WebSocket Connect Event**

```javascript
const socket = new WebSocket('ws://localhost:8080');

socket.addEventListener('open', () => {
  // Do something when the WebSocket connection is opened
});
```

**9. WebSocket Message Event**

```javascript
const socket = new WebSocket('ws://localhost:8080');

socket.addEventListener('message', (event) => {
  // Get the message data
  const data = event.data;
  // Do something with the message data
});
```

**10. WebSocket Close Event**

```javascript
const socket = new WebSocket('ws://localhost:8080');

socket.addEventListener('close', () => {
  // Do something when the WebSocket connection is closed
});
```

**11. WebSocket Error Event**

```javascript
const socket = new WebSocket('ws://localhost:8080');

socket.addEventListener('error', (event) => {
  // Do something when the WebSocket connection encounters an error
});
```

**12. File Upload Progress Event**

```javascript
const fileInput = document.getElementById('myFileInput');

fileInput.addEventListener('change', (event) => {
  // Get the files
  const files = event.target.files;
  // Do something with the files
});
```

**13. Audio Play Event**

```javascript
const audio = document.getElementById('myAudio');

audio.addEventListener('play', () => {
  // Do something when the audio starts playing
});
```

**14. Audio Pause Event**

```javascript
const audio = document.getElementById('myAudio');

audio.addEventListener('pause', () => {
  // Do something when the audio is paused
});
```

**15. Audio Ended Event**

```javascript
const audio = document.getElementById('myAudio');

audio.addEventListener('ended', () => {
  // Do something when the audio has finished playing
});
```

**16. Video Play Event**

```javascript
const video = document.getElementById('myVideo');

video.addEventListener('play', () => {
  // Do something when the video starts playing
});
```

**17. Video Pause Event**

```javascript
const video = document.getElementById('myVideo');

video.addEventListener('pause', () => {
  // Do something when the video is paused
});
```

**18. Video Ended Event**

```javascript
const video = document.getElementById('myVideo');

video.addEventListener('ended', () => {
  // Do something when the video has finished playing
});
```

**19. Canvas Click Event**

```javascript
const canvas = document.getElementById('myCanvas');

canvas.addEventListener('click', (event) => {
  // Get the mouse position on the canvas
  const x = event.clientX;
  const y = event.clientY;
  // Do something with the mouse position
});
```

**20. Canvas Mouse Move Event**

```javascript
const canvas = document.getElementById('myCanvas');

canvas.addEventListener('mousemove', (event) => {
  // Get the mouse position on the canvas
  const x = event.clientX;
  const y = event.clientY;
  // Do something with the mouse position
});
```

**21. Canvas Resize Event**

```javascript
const canvas = document.getElementById('myCanvas');

canvas.addEventListener('resize', () => {
  // Get the canvas size
  const width = canvas.width;
  const height = canvas.height;
  // Do something with the canvas size
});
```

**22. Animation Frame Event**

```javascript
window.requestAnimationFrame(() => {
  // Do something on the next animation frame
});
```

**23. Intersection Observer Entry Event**

```javascript
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // Do something when the element intersects the viewport
    }
  });
});

observer.observe(element);
```

**24. Mutation Observer Mutation Record**

```javascript
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // Do something when the element is mutated
  });
});

observer.observe(element, {
  attributes: true,
  childList: true,
  subtree: true
});
```

**25. Pointer Down Event**

```javascript
const element = document.getElementById('myElement');

element.addEventListener('pointerdown', (event) => {
  // Do something when the element is touched or clicked
});
```

**26. Pointer Up Event**

```javascript
const element = document.getElementById('myElement');

element.addEventListener('pointerup', (event) => {
  // Do something when the element is released after being touched or clicked
});
```

**27. Pointer Move Event**

```javascript
const element = document.getElementById('myElement');

element.addEventListener('pointermove', (event) => {
  // Do something when the pointer moves over the element
});
```

**28. Touch Start Event**

```javascript
const element = document.getElementById('myElement');

element.addEventListener('touchstart', (event) => {
  // Do something when the element is touched
});
```

**29. Touch End Event**

```javascript
const element = document.getElementById('myElement');

element.addEventListener('touchend', (event) => {
  // Do something when the element is released after being touched
});
```

**30. Touch Move Event**

```javascript
const element = document.getElementById('myElement');

element.addEventListener('touchmove', (event) => {
  // Do something when the finger moves over the element
});
```

**31. Device Motion Event**

```javascript
window.addEventListener('devicemotion', (event) => {
  // Get the acceleration data
  const acceleration = event.acceleration;
  // Do something with the acceleration data
});
```

**32. Device Orientation Event**

```javascript
window.addEventListener('deviceorientation', (event) => {
  // Get the orientation data
  const alpha = event.alpha;
  const beta = event.beta;
  const gamma = event.gamma;
  // Do something with the orientation data
});
```

**33. Speech Recognition Result Event**

```javascript
const speechRecognition = new webkitSpeechRecognition();

speechRecognition.addEventListener('result', (event) => {
  // Get the speech recognition results
  const results = event.results;
  // Do something with the speech recognition results
});
```

**34. Speech Recognition Error Event**

```javascript
const speechRecognition = new webkitSpeechRecognition();

speechRecognition.addEventListener('error', (event) => {
  // Do something when the speech recognition encounters an error
});
```

**35. Speech Synthesis Voice Changed Event**

```javascript
const speechSynthesis = new SpeechSynthesisUtterance();

speechSynthesis.addEventListener('voicechanged', () => {
  // Do something when the speech synthesis voice is changed
});
```

**36. Bluetooth Connection Event**

```javascript
const bluetooth = new Bluetooth();

bluetooth.addEventListener('connection', (event) => {
  // Do something when a Bluetooth device connects
});
```