Javascript로 맞춤 이벤트를 만드는 방법은 무엇입니까? (코드 예)

자바스크립트 이벤트와 리스너를 사용하는 것은 매우 간단합니다. 예를 들어 다음 클릭 이벤트는 모두에게 익숙할 것입니다.

document.getElementById('my-button').addEventListener('click', function(){
    console.log('do something awesome!');});

위 코드는 my-버튼을 클릭할 때 실행되며 이 클릭 이벤트(및 다른 많은 이벤트)가 이미 제공되고 있습니다. 하지만 자신만의 이벤트를 만들고 싶다면 어떻게 해야 할까요? 사실 아주 간단합니다.

맞춤 이벤트 만들기

맞춤 이벤트를 만들려면 다음과 같이 할 수 있습니다.

function create_custom_event(){
    
    var element = document.getElementById('my-button');
    
    element.classList.add('active')
    
    // 创建一个新的自定义事件
    var event = new CustomEvent('madeActive');
    // 分派元素上的事件
    element.dispatchEvent(event);}

위에서 방금 madeActive라는 맞춤 이벤트를 만들었으므로 이제 애플리케이션의 어느 곳에서나 이 이벤트를 듣고 이 이벤트를 들을 수 있습니다. 이벤트가 트리거되면 몇 가지 새로운 기능을 실행합니다.

맞춤 이벤트 듣기

맞춤 이벤트 듣기는 자바스크립트의 다른 이벤트 리스너와 똑같이 작동합니다. addEventListener를 요소에 연결하고 수신 중인 이벤트를 지정합니다.

document.getElementById('my-button').addEventListener('madeActive', function(){
    console.log('Awesome, my own custom Event!');});

이제 madeActive 이벤트(또는 사용자 정의 이벤트)가 트리거될 때마다 위 코드가 실행됩니다.

애플리케이션에서 사용자 정의 이벤트를 사용하면 코드를 구성하고 더 읽기 쉽게 만들 수 있습니다. 또한 한 곳에서 이벤트를 트리거할 수 있고 리스너가 듣고 있는 곳 어디에서나 원하는 기능을 실행할 수 있으므로 유지 관리가 더 쉬워집니다.

관련 추천: "javascript 튜토리얼"

이 글은 Javascript로 커스텀 이벤트를 생성하는 방법을 소개한 글입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!

위 내용은 Javascript로 맞춤 이벤트를 만드는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!