自定义事件的监听及触发

最新推荐文章于 2024-05-02 18:12:22 发布

大猫会长

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量153

点赞数 5

文章标签： javascript

本文链接：https://blog.csdn.net/aexwx/article/details/138212327

版权

举例:
<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.

Creating Custom Events

const event = new CustomEvent('roadmap-updated', {
  detail: { name: 'JavaScript' },
});
element.dispatchEvent(event);

Listening for Custom Events

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' }
});

Removing Event Listeners

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);