Event Listener Functions

Author: JanluOfficial

snippets/javascript/event-handling/add-an-event-listener.md

@@ -0,0 +1,11 @@
+---
+title: Add an event listener
+description: Add an event listener to an element
+author: JanluOfficial
+tags: event-handling
+---
+
+```js
+const myElement = document.getElementById("myElement");
+myElement.addEventListener("click", function(){ myFunction("Param1", 2) });
+```

snippets/javascript/event-handling/remove-an-event-listener.md

@@ -0,0 +1,11 @@
+---
+title: Remove an event listener
+description: Remove an event listener from an element
+author: JanluOfficial
+tags: event-handling
+---
+
+```js
+const myElement = document.getElementById("myElement");
+myElement.removeEventListener("click", function(){ myFunction("Param1", 2) });
+```

snippets/javascript/event-handling/trigger-a-custom-event.md

@@ -0,0 +1,25 @@
+---
+title: Trigger a custom event
+description: Triggers a custom event on an element
+author: JanluOfficial
+tags: event-handling,custom-event
+---
+
+```js
+function handleCustomEvent(event) {
+  console.log('Custom event triggered:', event.detail);
+}
+
+const targetElement = document.getElementById('targetElement');
+targetElement.addEventListener('myCustomEvent', handleCustomEvent);
+
+const customEvent = new CustomEvent('myCustomEvent', {
+  detail: {
+    message: 'This is a custom event',
+    time: new Date(),
+  },
+});
+
+// Usage:
+targetElement.dispatchEvent(customEvent);
+```