덧붙여서, 사용자 정의 이벤트를 전달해야 하는 경우도 있을 것이다. SliderButtons 컴포넌트에 적용했던 첫 번째 방법의 경우에는 플러그인에 이미 존재하는 이벤트를 사용했으므로 사용자 정의 이벤트를 쓸 필요가 없었다. 다음에 살펴볼 구현 방법은 이벤트를 생성하여 데이터와 함께 window로 전달한다. jQuery 슬라이더 객체를 생성하는 코드와 함께 사용자 정의 slide 이벤트를 전달하는 코드를 구현할 수 있다. index.html의 script 태그에서 다음과 같은 내용을 확인할 수 있다(ch06/slider/index.html).

 

예제 코드 6.16 jQuery UI 플러그인에 이벤트 리스너 설정하기

let handleChange = (e, ui)=>{ ---- jQuery 슬라이더에 적용하여 사용자 정의 이벤트를 전달할 이벤트 핸들러를 생성한다.
    var slideEvent = new CustomEvent('slide', { ---- 사용자 정의 이벤트를 생성한다.
        detail: {ui: ui, jQueryEvent: e} ---- 현재 슬라이더 값을 가진 jQuery 데이터를 전달한다.
    })
    window.dispatchEvent(slideEvent) ---- 이벤트를 window로 전달한다.
}
$( '#slider' ).slider({ ---- ID가 slider인 컨테이너 요소에 슬라이더를 생성한다.
    'change': handleChange, ---- change와 slide에 각각 이벤트 리스너를 등록하여 프로그래밍적 변경과 UI 변경을 감지한다.
    'slide': handleChange
})

---