- 举例:
- <body>
-
- <p class="text-content" id="text-content">这里是你的</p>
- <script>
- const event = new CustomEvent('roadmap-updated', {
- detail: { name: 'JavaScript' },
- });
-
- document.getElementById('text-content').addEventListener('roadmap-updated', (event) => {
- console.log(event.detail); // { name: 'JavaScript' }
- });
- document.getElementById('text-content').dispatchEvent(event);
- </script>
You can use the CustomEvent constructor to create a custom event. The CustomEvent constructor accepts two arguments: the event name and an optional object that specifies the event options. And you can use the dispatchEvent method to dispatch the custom event on the target element/document.
- const event = new CustomEvent('roadmap-updated', {
- detail: { name: 'JavaScript' },
- });
- element.dispatchEvent(event);
You can listen for custom events using the addEventListener method. The addEventListener method accepts the event name and a callback function that is called when the event is dispatched.
- element.addEventListener('roadmap-updated', (event) => {
- console.log(event.detail); // { name: 'JavaScript' }
- });
You can remove event listeners using the removeEventListener method. The removeEventListener method accepts the event name and the callback function that was used to add the event listener.
- function handleEvent(event) {
- console.log(event.detail); // { name: 'JavaScript' }
- }
-
- element.addEventListener('roadmap-updated', handleEvent);
- element.removeEventListener('roadmap-updated', handleEvent);